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

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

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

C1fd049850db1bdcbedd2b7a62f3b805?s=128

Yutaro Miyazaki

November 23, 2018
Tweet

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. ありがとうございました