Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React + Apollo Client (GraphQL) により変化するアプリケーション設計
Search
Yutaro Miyazaki
November 23, 2018
Technology
6
3.1k
React + Apollo Client (GraphQL) により変化するアプリケーション設計
Node 学園祭2018のトークで使用したスライドです。
https://nodefest.jp/2018/schedule.html#conference-5-8
Yutaro Miyazaki
November 23, 2018
Tweet
Share
More Decks by Yutaro Miyazaki
See All by Yutaro Miyazaki
Server Side Rendering Tuning with Next.js
vwxyutarooo
2
1.6k
The challenge of Mercari Web Re-Architecture Project
vwxyutarooo
1
160
ゼロから始めるっぽい Service Worker
vwxyutarooo
5
980
Other Decks in Technology
See All in Technology
SaaS公式MCPサーバーをリリースして得た学び
kawamataryo
5
1.4k
Azure の裏側を支える SRE の世界
tsubasaxzzz
2
210
4月15日の AZ 障害をテクサポの中の人目線で振り返ってみる
kazzpapa3
3
190
newmo の創業を支える Software Architecture と Platform Engineering
110y
5
670
【Gen-AX】20250514開催_Findyオンラインイベント_技術選定を突き詰める
genax
0
120
WindowsでGenesisに挑戦した話
natsutan
0
120
PythonツールであるpygnmiをSONiCのgNMIに対して使ってみた
sonic
0
320
エンジニアのための 法規制への取り組み方 #healthtechmeetup
77web
0
240
AWS_MCP_Servers入門.pdf
naotoiso
0
200
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
75
21k
Next.jsと状態管理のプラクティス
uhyo
6
2.4k
インフラからSREへ
mirakui
20
7.8k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Into the Great Unknown - MozCon
thekraken
38
1.8k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
430
Automating Front-end Workflow
addyosmani
1370
200k
A Tale of Four Properties
chriscoyier
159
23k
How to train your dragon (web standard)
notwaldorf
91
6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.3k
Unsuck your backbone
ammeep
671
58k
Optimizing for Happiness
mojombo
378
70k
Transcript
GraphQL + Apollo により変化する GraphQL + Apollo により変化する クライアントアプリ設計 クライアントアプリ設計
Frontend engineer @vwxyuratoooo
About Me About Me Yutaro Miyazaki (@vwxyutarooo) Frontend engineer Work
for Mercari React, GraphQL, Apollo
Before I start to talk
GraphQL, Apollo and Me GraphQL, Apollo and Me Mercari Web
Re Architecture
None
GraphQL, Apollo and Me GraphQL, Apollo and Me TypeScript, GraphQL,
Apollo, Next.js React
GraphQL Summit 2018 GraphQL Summit 2018
What I going to talk about... What I going to
talk about...
None
None
What I going to talk about... What I going to
talk about...
Agenda Agenda Preparation What the GraphQL is What the Apollo
is Apollo Client React Apollo Apollo Link State Compare with Flux
Agenda Agenda Preparation What the GraphQL is What the Apollo
is Apollo Client React Apollo Apollo Link State Compare with Flux
What the GraphQL is What the GraphQL is GraphQL is
an open‒source data query and manipulation language.
None
None
Available for several languages JavaScript, Go, Kotlin, Ruby, etc Replacement
of Restful API? As a BFF Aggregate Microservices
What the Apollo is What the Apollo is
None
Apollo Platform Apollo Platform
None
VSCode VSCode Apollo Engine + VSCode https://summit‒2018‒apollo‒client.netlify.com/#27
Agenda Agenda Preparation What the GraphQL is What the Apollo
is Apollo Client React Apollo Apollo Link State Compare with Flux
Apollo Client Apollo Client Apollo Boost Apollo Link Apollo Cache
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));
Agenda Agenda Preparation What the GraphQL is What the Apollo
is Apollo Client React Apollo Apollo Link State Compare with Flux
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"));
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> );
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> ); };
Agenda Agenda Preparation What the GraphQL is What the Apollo
is Apollo Client React Apollo Apollo Link State Compare with Flux
Apollo Link State Apollo Link State Schema for local state
All of state management to be declarative Controlled under the Apollo Cache
None
None
Agenda Agenda Preparation What the GraphQL is What the Apollo
is Apollo Client React Apollo Apollo Link State Compare with Flux
None
None
None
None
None
None
None
None
None
None
None
None
None
In Conclusion In Conclusion Focus to the presentation logic, UI
thing.
ありがとうございました