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
820
タイムアウトにご用心 / 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
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
150
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
ニーリーにおけるプロダクトエンジニア
nealle
0
840
Deep Dive into ~/.claude/projects
hiragram
14
2.5k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
150
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Thoughts on Productivity
jonyablonski
69
4.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
How STYLIGHT went responsive
nonsquared
100
5.6k
What's in a price? How to price your products and services
michaelherold
246
12k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Code Review Best Practice
trishagee
69
18k
The Language of Interfaces
destraynor
158
25k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Being A Developer After 40
akosma
90
590k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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