React + Apollo Client (GraphQL) により変化するアプリケーション設計

Node 学園祭2018のトークで使用したスライドです。
https://nodefest.jp/2018/schedule.html#conference-5-8

Transcript

1. GraphQL + Apollo により変化する GraphQL + Apollo により変化する クライアントアプリ設計 クライアントアプリ設計 Frontend engineer @vwxyuratoooo
2. About Me About Me Yutaro Miyazaki (@vwxyutarooo) Frontend engineer Work for Mercari React, GraphQL, Apollo
3. Before I start to talk
4. GraphQL, Apollo and Me GraphQL, Apollo and Me Mercari Web Re Architecture
6. GraphQL, Apollo and Me GraphQL, Apollo and Me TypeScript, GraphQL, Apollo, Next.js React
7. GraphQL Summit 2018 GraphQL Summit 2018
8. What I going to talk about... What I going to talk about...
11. What I going to talk about... What I going to talk about...
12. Agenda Agenda Preparation What the GraphQL is What the Apollo is Apollo Client React Apollo Apollo Link State Compare with Flux
13. Agenda Agenda Preparation What the GraphQL is What the Apollo is Apollo Client React Apollo Apollo Link State Compare with Flux
14. What the GraphQL is What the GraphQL is GraphQL is an open‒source data query and manipulation language.
17. Available for several languages JavaScript, Go, Kotlin, Ruby, etc Replacement of Restful API? As a BFF Aggregate Microservices
18. What the Apollo is What the Apollo is
20. Apollo Platform Apollo Platform
22. VSCode VSCode Apollo Engine + VSCode https://summit‒2018‒apollo‒client.netlify.com/#27
23. Agenda Agenda Preparation What the GraphQL is What the Apollo is Apollo Client React Apollo Apollo Link State Compare with Flux
24. Apollo Client Apollo Client Apollo Boost Apollo Link Apollo Cache
25. import ApolloClient from "apollo-boost"; const client = new ApolloClient({ uri: 'https://graphql-server.com' }); import ApolloClient from "apollo-boost"; import gql from "graphql-tag"; const client = new ApolloClient({ uri: 'https://graphql-server.com' }); client.query({ query: gql` { rates(currency: "USD") { currency } } ` }).then(result => console.log(result));
26. Agenda Agenda Preparation What the GraphQL is What the Apollo is Apollo Client React Apollo Apollo Link State Compare with Flux
27. React Apollo React Apollo import React from "react"; import { render } from "react-dom"; import { ApolloProvider } from "react-apollo"; const App = () => ( <ApolloProvider client={client}> <div> <h2>My first Apollo app </h2> </div> </ApolloProvider> ); render(<App />, document.getElementById("root"));
28. Define Schema Pass schema to Query Component as props const GET_DOGS = gql` { dogs { id breed } } `; import { Query } from 'react-apollo'; const Feed = () => ( <Query query={GET_DOGS}> {({ loading, error, data }) => { if (error) return <Error />; if (loading || !data) return <Fetching />; return <DogList dogs={data.dogs} />; }} </Query> );
29. Mutation const ADD_TODO = gql` mutation AddTodo($type: String!) { addTodo(type: $type) { id type } } `; const AddTodo = ({ value }) => { return ( <Mutation mutation={ADD_TODO}> {(addTodo) => ( <button type="button" onClick={() => addTodo({ variables: { type: value } })} >Add Todo</button> )} </Mutation> ); };
30. Agenda Agenda Preparation What the GraphQL is What the Apollo is Apollo Client React Apollo Apollo Link State Compare with Flux
31. Apollo Link State Apollo Link State Schema for local state All of state management to be declarative Controlled under the Apollo Cache
34. Agenda Agenda Preparation What the GraphQL is What the Apollo is Apollo Client React Apollo Apollo Link State Compare with Flux
48. In Conclusion In Conclusion Focus to the presentation logic, UI thing.
49. ありがとうございました