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
3k
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
910
Other Decks in Technology
See All in Technology
C++26 エラー性動作
faithandbrave
2
800
Fanstaの1年を大解剖! 一人SREはどこまでできるのか!?
syossan27
2
170
プロダクト開発を加速させるためのQA文化の築き方 / How to build QA culture to accelerate product development
mii3king
1
280
オプトインカメラ:UWB測位を応用したオプトイン型のカメラ計測
matthewlujp
0
190
20241220_S3 tablesの使い方を検証してみた
handy
4
660
クレカ・銀行連携機能における “状態”との向き合い方 / SmartBank Engineer LT Event
smartbank
2
100
私なりのAIのご紹介 [2024年版]
qt_luigi
1
120
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
muziyoshiz
3
2.5k
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
1k
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
cybozuinsideout
PRO
5
38k
5分でわかるDuckDB
chanyou0311
10
3.3k
LINEスキマニにおけるフロントエンド開発
lycorptech_jp
PRO
0
330
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
4 Signs Your Business is Dying
shpigford
182
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
The Invisible Side of Design
smashingmag
298
50k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
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.
ありがとうございました