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.4k
The challenge of Mercari Web Re-Architecture Project
vwxyutarooo
1
150
ゼロから始めるっぽい Service Worker
vwxyutarooo
5
860
Other Decks in Technology
See All in Technology
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
Android研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
100
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
簡単に始めるSnowflakeの機械学習
nayuts
1
190
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
20
1.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
Six Lessons from altMBA
skipperchong
24
3.2k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Designing for Performance
lara
604
67k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
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.
ありがとうございました