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
460
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
1.1k
Ruby で作る Ruby (物理)
mtsmfm
1
210
GraphQL Ruby benchmark
mtsmfm
1
830
タイムアウトにご用心 / Timeout might break application state
mtsmfm
6
2.5k
Build REST API with GraphQL Ruby
mtsmfm
0
330
GraphQL Ruby をちょっとだけ速くした / Make graphql-ruby faster a bit
mtsmfm
1
730
Gaming PC on GCP
mtsmfm
0
730
How to introduce GraphQL to an existing React-Redux application
mtsmfm
1
250
Canary release in StudySapuri
mtsmfm
0
3.1k
Other Decks in Programming
See All in Programming
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
280
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
200
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
200
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
440
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
730
Model Pollution
hschwentner
1
160
CDK引数設計道場100本ノック
badmintoncryer
2
480
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.1k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
610
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
RailsConf 2023
tenderlove
30
1.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Site-Speed That Sticks
csswizardry
10
700
How to Ace a Technical Interview
jacobian
278
23k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Building Applications with DynamoDB
mza
95
6.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
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