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駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
820
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
5つのアンチパターンから学ぶLT設計
narihara
1
170
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
110
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.4k
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
100
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
PicoRuby on Rails
makicamel
2
130
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
What's in a price? How to price your products and services
michaelherold
246
12k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Invisible Side of Design
smashingmag
301
51k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Raft: Consensus for Rubyists
vanstee
140
7k
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