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
instant learning graphql and relay
Search
Fumiaki MATSUSHIMA
February 16, 2017
Programming
2
420
instant learning graphql and relay
シュッとーく #01
(永和社内イベント)
Fumiaki MATSUSHIMA
February 16, 2017
Tweet
Share
More Decks by Fumiaki MATSUSHIMA
See All by Fumiaki MATSUSHIMA
Learning from performance improvements on GraphQL Ruby
mtsmfm
1
890
Ruby で作る Ruby (物理)
mtsmfm
0
160
GraphQL Ruby benchmark
mtsmfm
1
660
タイムアウトにご用心 / Timeout might break application state
mtsmfm
6
2.3k
Build REST API with GraphQL Ruby
mtsmfm
0
250
GraphQL Ruby をちょっとだけ速くした / Make graphql-ruby faster a bit
mtsmfm
1
630
Gaming PC on GCP
mtsmfm
0
620
How to introduce GraphQL to an existing React-Redux application
mtsmfm
1
190
Canary release in StudySapuri
mtsmfm
0
2.8k
Other Decks in Programming
See All in Programming
CSC307 Lecture 05
javiergs
PRO
0
210
Product Management LT会_クアンド新家
shinshin
0
260
유연한 Composable 설계
l2hyunwoo
0
380
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
20240706_CDKConf
takuyay0ne
0
1.2k
iOSアプリでクリップボードにコピーしたことをユーザーに伝えるちょうど良いフィードバックを探す
ski
0
100
【Go言語】golangci-lintの使い方
tomo1227
0
280
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
小さな開発会社を作った理由
polidog
0
1.9k
How to use Macrobenchmark
veronikapj
0
160
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
689
190k
Building Applications with DynamoDB
mza
89
5.8k
KATA
mclloyd
20
13k
Practical Orchestrator
shlominoach
185
10k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Designing Experiences People Love
moore
136
23k
The Invisible Customer
myddelton
117
13k
A Tale of Four Properties
chriscoyier
155
22k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Infographics Made Easy
chrislema
238
18k
Building Your Own Lightsaber
phodgson
101
5.9k
Transcript
(株)永和システムマネジメント @mtsmfm 松島 史秋 シュッと学ぶ GraphQL/Relay
※ 仕事ではまだ使えてないので あんまりつっこまれてもこまるよ
GraphQL とは
http://graphql.org/
API のための クエリ言語
REST API の問題
User 1-* Tweet
/users [ {id: 1}, {id: 2} ]
/users/1/tweets [ {id: 1, body: ‘hi’}, {id: 2, body: ‘bye’}
]
/users/2/tweets [ {id: 3, body: ‘あ’}, {id: 4, body: ‘い’}
]
/users /users/1/tweets /users/2/tweets ...
クライアント N+1
/users [ { id: 1 tweets: [ {id: 1, body:
‘hi’}, {id: 2, body: ‘bye’}, ] }, { id: 2 ...
- ふぁぼも欲しい - プロフィールも - ツイートのRTも
- ふぁぼも欲しい - プロフィールも - ツイートのRTも
そこでクエリ言語
/graphql query { users { id tweets { id, body
} } }
何が欲しいかを 書く
エンドポイントは 1つ
- query - mutation
- query (GET) - mutation (POST) みたいなもの
POST /tweets {tweet: {body: ‘hi’}} # => {id: 1, body:
‘hi’}
/graphql mutation { createTweet(body: ‘hi’) { tweetEdge { id, body
} } }
Relay
React の コンポーネントを GraphQL に 紐付ける
コンポーネントは 何が欲しいかを宣言する
class Tweet extends React.Component { render () { return (
<div>{this.props.tweet.body}</div> ) } }
class Tweet extends React.Component { render () { return (
<div>{this.props.tweet.body}</div> ) } } Relay.createContainer(Tweet, { fragments: { tweet: () => Relay.QL` fragment on Tweet { body } ` } }
コンポーネントは 何が欲しいかを宣言する
子の分は親が面倒を見る
class App extends React.Component { render () { return (
<Tweet tweet={this.props.tweet} /> ) } } Relay.createContainer(App, { fragments: { tweet: () => Relay.QL` fragment on Tweet { ${Tweet.getFragment(‘tweet’) } ` } }
GraphQL は あくまで クエリ言語
Relay がうまいこと 動くために GraphQL 上で 実装しないと いけない仕様
http://facebook.github.io/relay/docs/getting-started.html#content
Object Identification
Relay は Store 込み キャッシュとかも いい感じ (詳細はよく知らない) に扱う
特定のオブジェクト “だけ” の更新が必要になる 場合がある
query { node(id: ‘RmFjdGlvbjox’) id, body } }
query { node(id: ‘RmFjdGlvbjox’) id, body } } オブジェクトの グローバル
ID
Connection
query { users { tweets( first: 5, after: ‘RmFjdGlvbjox’ )
{ edges { node { id, body } pageInfo { hasNextPage } } } }
query { users { tweets( first: 5, after: ‘RmFjdGlvbjox’ )
{ edges { node { id, body } pageInfo { hasNextPage } } } }
Cursor based Pagination 無限スクロール
Offset based Pagination <- < 1, [2], 3 > ->
(特に流速が速いと) offset でやると 見落としてしまう
我々の頭は あまりに offset ベースに 慣れすぎている
(流速が遅いと) 「あの辺」という 脳内インデックスが できる
この辺 https://dev-blog.apollodata.com/understanding-pagin ation-rest-graphql-and-relay-b10f835549e7#.n34gvtq r5
まとめ
GraphQL/Relay によって - クライアント N+1 が解消する - クライアント(コンポーネント)が必要なものを 自分で宣言して取ってこれる -
リクエストを投げて Store に放り込んでコン ポーネントに繋げるまでを考える戦いに終止 符が打たれる - Schema による秩序が靠らされる
とりあえず GitHub の GraphQL であそんでみては https://developer.github.com/early-access/gr aphql/explorer/ https://github.com/github/github-graphql-rail s-example/
その後は素振り https://github.com/gauravtiwari/relay-rails-bl og/ https://github.com/rmosolgo/graphql-ruby
よく知らない/素振れてないこと - Validation - Auth - 親の variable が必要な Mutation
Credits Background pattern from subtlepatterns.com Emoji provided free by Emoji
One