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

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

Transcript

1. GraphQL + Apollo により変化する
   GraphQL + Apollo により変化する
   クライアントアプリ設計
   クライアントアプリ設計
   Frontend engineer
   @vwxyuratoooo
   

   View Slide

2. About Me
   About Me
   Yutaro Miyazaki
   (@vwxyutarooo)
   Frontend engineer
   Work for Mercari
   React, GraphQL, Apollo
   

   View Slide

3. Before I start to talk
   

   View Slide

4. GraphQL, Apollo and Me
   GraphQL, Apollo and Me
   Mercari Web Re Architecture
   

   View Slide

5. View Slide

6. GraphQL, Apollo and Me
   GraphQL, Apollo and Me
   TypeScript, GraphQL, Apollo, Next.js React
   

   View Slide

7. GraphQL Summit 2018
   GraphQL Summit 2018
   

   View Slide

8. What I going to talk about...
   What I going to talk about...
   

   View Slide

9. View Slide

10. View Slide

11. What I going to talk about...
    What I going to talk about...
    

    View Slide

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

    View Slide

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

    View Slide

14. What the GraphQL is
    What the GraphQL is
    GraphQL is an open‒source data query
    and manipulation language.
    

    View Slide

15. View Slide

16. View Slide

17. Available for several languages
    JavaScript, Go, Kotlin, Ruby, etc
    Replacement of Restful API?
    As a BFF
    Aggregate Microservices
    

    View Slide

18. What the Apollo is
    What the Apollo is
    

    View Slide

19. View Slide

20. Apollo Platform
    Apollo Platform
    

    View Slide

21. View Slide

22. VSCode
    VSCode
    Apollo Engine + VSCode
    https://summit‒2018‒apollo‒client.netlify.com/#27
    

    View Slide

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

    View Slide

24. Apollo Client
    Apollo Client
    Apollo Boost
    Apollo Link
    Apollo Cache
    

    View Slide

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));
    

    View Slide

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

    View Slide

27. React Apollo
    React Apollo
    import React from "react";
    import { render } from "react-dom";
    import { ApolloProvider } from "react-apollo";
    const App = () => (
    
    
    My first Apollo app
    
    
    );
    render(, document.getElementById("root"));
    

    View Slide

28. Define Schema
    Pass schema to Query Component as props
    const GET_DOGS = gql`
    {
    dogs {
    id
    breed
    }
    }
    `;
    import { Query } from 'react-apollo';
    const Feed = () => (
    
    {({ loading, error, data }) => {
    if (error) return ;
    if (loading || !data) return ;
    return ;
    }}
    
    );
    

    View Slide

29. Mutation
    const ADD_TODO = gql`
    mutation AddTodo($type: String!) {
    addTodo(type: $type) {
    id
    type
    }
    }
    `;
    const AddTodo = ({ value }) => {
    return (
    
    {(addTodo) => (
    type="button"
    onClick={() => addTodo({ variables: { type: value } })}
    >Add Todo
    )}
    
    );
    };
    

    View Slide

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

    View Slide

31. Apollo Link State
    Apollo Link State
    Schema for local state
    All of state management to be declarative
    Controlled under the Apollo Cache
    

    View Slide

32. View Slide

33. View Slide

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

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

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

    View Slide

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

    View Slide