Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Yutaro Miyazaki

November 23, 2018
Tweet

More Decks by Yutaro Miyazaki

Other Decks in Technology

Transcript

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

    is Apollo Client React Apollo Apollo Link State Compare with Flux
  2. Agenda Agenda Preparation What the GraphQL is What the Apollo

    is Apollo Client React Apollo Apollo Link State Compare with Flux
  3. What the GraphQL is What the GraphQL is GraphQL is

    an open‒source data query and manipulation language.
  4. Agenda Agenda Preparation What the GraphQL is What the Apollo

    is Apollo Client React Apollo Apollo Link State Compare with Flux
  5. 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));
  6. Agenda Agenda Preparation What the GraphQL is What the Apollo

    is Apollo Client React Apollo Apollo Link State Compare with Flux
  7. 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"));
  8. 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> );
  9. 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> ); };
  10. Agenda Agenda Preparation What the GraphQL is What the Apollo

    is Apollo Client React Apollo Apollo Link State Compare with Flux
  11. Apollo Link State Apollo Link State Schema for local state

    All of state management to be declarative Controlled under the Apollo Cache
  12. Agenda Agenda Preparation What the GraphQL is What the Apollo

    is Apollo Client React Apollo Apollo Link State Compare with Flux