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
2.9k
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.5k
The challenge of Mercari Web Re-Architecture Project
vwxyutarooo
1
150
ゼロから始めるっぽい Service Worker
vwxyutarooo
5
890
Other Decks in Technology
See All in Technology
オニオンアーキテクチャで実現した 本質課題を解決する インフラ移行の実例
hryushm
14
3k
バクラクにおける可観測性向上の取り組み
yuu26
3
400
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
180
新卒1年目が挑む!生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
160
事業者間調整の行間を読む 調整の具体事例
sugiim
0
840
急成長中のWINTICKETにおける品質と開発スピードと向き合ったQA戦略と今後の展望 / winticket-autify
cyberagentdevelopers
PRO
1
160
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
100
【若手エンジニア応援LT会】AWS Security Hubの活用に苦労した話
kazushi_ohata
0
150
pandasはPolarsに性能面で追いつき追い越せるのか
vaaaaanquish
4
4.1k
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
21
3.3k
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
420
生成AIの強みと弱みを理解して、生成AIがもたらすパワーをプロダクトの価値へ繋げるために実践したこと / advance-ai-generating
cyberagentdevelopers
PRO
1
170
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Ruby is Unlike a Banana
tanoku
96
11k
Raft: Consensus for Rubyists
vanstee
136
6.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
A better future with KSS
kneath
238
17k
Designing Experiences People Love
moore
138
23k
Building an army of robots
kneath
302
42k
A Tale of Four Properties
chriscoyier
156
23k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Building Your Own Lightsaber
phodgson
102
6k
Agile that works and the tools we love
rasmusluckow
327
21k
Practical Orchestrator
shlominoach
186
10k
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.
ありがとうございました