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.8k
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.4k
The challenge of Mercari Web Re-Architecture Project
vwxyutarooo
1
140
ゼロから始めるっぽい Service Worker
vwxyutarooo
5
830
Other Decks in Technology
See All in Technology
生成AI活用推進の為にやったこと/やらなかったこと
ktc_wada
0
180
開発スピードの維持向上を支える、テスト設計の 漸進的進化への取り組み / Continuous Test Design Development for Speed of Product Development
ropqa
0
180
Google Cloudを組織(企業)で運用する時のベストプラクティス × 健康の環境分離戦略 #まるクラ勉強会
yasumuusan
0
170
テストコードを書きながらCompose Multiplatformを乗りこなす
subroh0508
0
140
AI JIMY - 登壇(インストール編)
hanacchi
0
150
Real World Type Puzzle and Code Generation
yukukotani
4
640
The depthes of profiling Ruby - RubyKaigi 2024
osyoyu
0
150
日本が誇るイタリアのダンスミュージック!? ユーロビートって何??
minorun365
PRO
2
220
「知的単純作業」を自動化する、地に足の着いた大規模言語モデル (LLM) の活用
nrryuya
8
8.3k
NewSQL Landscape
oracle4engineer
PRO
5
3.2k
Taking Flight with Tailwind CSS
opdavies
0
4.3k
Deno で作る快適な “as Code” プラットフォーム – TSKaigi 2024
pizzacat83
4
310
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
84
45k
It's Worth the Effort
3n
180
27k
Fireside Chat
paigeccino
22
2.7k
Adopting Sorbet at Scale
ufuk
69
8.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
How to Ace a Technical Interview
jacobian
273
22k
RailsConf 2023
tenderlove
9
580
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
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.
ありがとうございました