Slide 1
Slide 1 text
GraphQL + Apollo により変化する
GraphQL + Apollo により変化する
クライアントアプリ設計
クライアントアプリ設計
Frontend engineer
@vwxyuratoooo
Slide 2
Slide 2 text
About Me
About Me
Yutaro Miyazaki
(@vwxyutarooo)
Frontend engineer
Work for Mercari
React, GraphQL, Apollo
Slide 3
Slide 3 text
Before I start to talk
Slide 4
Slide 4 text
GraphQL, Apollo and Me
GraphQL, Apollo and Me
Mercari Web Re Architecture
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
GraphQL, Apollo and Me
GraphQL, Apollo and Me
TypeScript, GraphQL, Apollo, Next.js React
Slide 7
Slide 7 text
GraphQL Summit 2018
GraphQL Summit 2018
Slide 8
Slide 8 text
What I going to talk about...
What I going to talk about...
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
What I going to talk about...
What I going to talk about...
Slide 12
Slide 12 text
Agenda
Agenda
Preparation
What the GraphQL is
What the Apollo is
Apollo Client
React Apollo
Apollo Link State
Compare with Flux
Slide 13
Slide 13 text
Agenda
Agenda
Preparation
What the GraphQL is
What the Apollo is
Apollo Client
React Apollo
Apollo Link State
Compare with Flux
Slide 14
Slide 14 text
What the GraphQL is
What the GraphQL is
GraphQL is an open‒source data query
and manipulation language.
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Available for several languages
JavaScript, Go, Kotlin, Ruby, etc
Replacement of Restful API?
As a BFF
Aggregate Microservices
Slide 18
Slide 18 text
What the Apollo is
What the Apollo is
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Apollo Platform
Apollo Platform
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
VSCode
VSCode
Apollo Engine + VSCode
https://summit‒2018‒apollo‒client.netlify.com/#27
Slide 23
Slide 23 text
Agenda
Agenda
Preparation
What the GraphQL is
What the Apollo is
Apollo Client
React Apollo
Apollo Link State
Compare with Flux
Slide 24
Slide 24 text
Apollo Client
Apollo Client
Apollo Boost
Apollo Link
Apollo Cache
Slide 25
Slide 25 text
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));
Slide 26
Slide 26 text
Agenda
Agenda
Preparation
What the GraphQL is
What the Apollo is
Apollo Client
React Apollo
Apollo Link State
Compare with Flux
Slide 27
Slide 27 text
React Apollo
React Apollo
import React from "react";
import { render } from "react-dom";
import { ApolloProvider } from "react-apollo";
const App = () => (
);
render(, document.getElementById("root"));
My first Apollo app
Slide 28
Slide 28 text
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 ;
}}
);
Slide 29
Slide 29 text
Mutation
const ADD_TODO = gql`
mutation AddTodo($type: String!) {
addTodo(type: $type) {
id
type
}
}
`;
const AddTodo = ({ value }) => {
return (
{(addTodo) => (
addTodo({ variables: { type: value } })}
>Add Todo
)}
);
};
Slide 30
Slide 30 text
Agenda
Agenda
Preparation
What the GraphQL is
What the Apollo is
Apollo Client
React Apollo
Apollo Link State
Compare with Flux
Slide 31
Slide 31 text
Apollo Link State
Apollo Link State
Schema for local state
All of state management to be declarative
Controlled under the Apollo Cache
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Agenda
Agenda
Preparation
What the GraphQL is
What the Apollo is
Apollo Client
React Apollo
Apollo Link State
Compare with Flux
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
In Conclusion
In Conclusion
Focus to the presentation logic, UI thing.
Slide 49
Slide 49 text
ありがとうございました