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.2k
Ruby で作る Ruby (物理)
mtsmfm
1
220
GraphQL Ruby benchmark
mtsmfm
1
840
タイムアウトにご用心 / Timeout might break application state
mtsmfm
6
2.6k
Build REST API with GraphQL Ruby
mtsmfm
0
340
GraphQL Ruby をちょっとだけ速くした / Make graphql-ruby faster a bit
mtsmfm
1
740
Gaming PC on GCP
mtsmfm
0
740
How to introduce GraphQL to an existing React-Redux application
mtsmfm
1
260
Canary release in StudySapuri
mtsmfm
0
3.1k
Other Decks in Programming
See All in Programming
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.5k
私の後悔をAWS DMSで解決した話
hiramax
4
210
Swift Updates - Learn Languages 2025
koher
2
510
Namespace and Its Future
tagomoris
6
710
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
340
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
Featured
See All Featured
Context Engineering - Making Every Token Count
addyosmani
3
58
Automating Front-end Workflow
addyosmani
1370
200k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
How to Ace a Technical Interview
jacobian
279
23k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Facilitating Awesome Meetings
lara
55
6.5k
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