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

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
5. None

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...
9. None
10. None

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.
15. None
16. None

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

19. None

20. Apollo Platform Apollo Platform

21. None

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
32. None
33. None

34. Agenda Agenda Preparation What the GraphQL is What the Apollo

    is Apollo Client React Apollo Apollo Link State Compare with Flux
35. None
36. None
37. None
38. None
39. None
40. None
41. None
42. None
43. None
44. None
45. None
46. None
47. None

48. In Conclusion In Conclusion Focus to the presentation logic, UI

    thing.

49. ありがとうございました