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
GraphQL on Rails
Search
Marc-Andre Giroux
March 15, 2016
Programming
3
930
GraphQL on Rails
Introduction to GraphQl and how to use it in Rails.
Marc-Andre Giroux
March 15, 2016
Tweet
Share
More Decks by Marc-Andre Giroux
See All by Marc-Andre Giroux
It Depends - Examining GraphQL Myths & Assumptions
xuorig
0
74
So you Want to Distribute your GraphQL Schema?
xuorig
4
710
So you Want to Distribute your GraphQL Schema?
xuorig
0
390
GraphQL Schema Design @ Scale
xuorig
5
2k
Continuous Evolution of GraphQL Schemas @ GitHub
xuorig
3
1.9k
GraphQL à Shopify
xuorig
0
200
Exploring GraphQL
xuorig
0
240
GraphQL @ Shopify
xuorig
6
1.4k
GraphQL on Rails
xuorig
2
320
Other Decks in Programming
See All in Programming
Material 3で Material 2ぽい見た目にする
numeroanddev
2
250
WasmOS: Wasmを実行する自作Microkernel
riru
0
380
Crafting a Own PHP - ウキウキ手作りミニマリストPHP
uzulla
4
1.1k
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
180
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
9
6.5k
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
受託開発でGitLab CI を活用していく
xiombatsg
1
130
PHPでOfficeファイルを取り扱う! PHP Officeライブラリを プロダクトに組み込んだ話
hirobe1999
0
840
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
27
19k
9年開発を牽引して見えてきた、共通化すべきものと個別でつくるもの ~プログラム言語~
shinout
1
300
WebComponentsで フレームワークを1ページに共存させる
webuilder240
0
150
Understanding Ast By Looking
inouehi
0
120
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
58
14k
Music & Morning Musume
bryan
39
5.5k
Code Reviewing Like a Champion
maltzj
512
39k
GraphQLとの向き合い方2022年版
quramy
28
12k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
KATA
mclloyd
14
11k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Transcript
GraphQL on Rails FROM REST TO GRAP HQL @ _
_XU O R IG _ _
@ _ _XU O R IG _ _
/product/1 product/1/photos/a product/1/photos/b product/1/variants
Way too many roundtrips!
/productview?include=variants&photo_count=2
/productview_thumbnail?include=price /productview_thumbnail?include=price&photo_size=small /productview_super_special_thumbnail_with_description?photo_size=100,1000 /an_endpoint_that_returns_a_bunch_of_things_that_i_need_for_a_particular_view
Better, but quickly becomes a nightmare.
Server Client product view v1 product model v1 update endpoints
create new endpoints product view v2 product view v3 product model v2 product model v3
GraphQL to the rescue
{ myShop { name } } Selection set Field
{ “myShop” { “name”: “GitHub” } } { myShop {
name } } Lexed Parsed Validated Executed
{ myShop { name } }
{ shop(id: 19423) { name } } { myShop {
name } }
{ myShop { name location { city address } }
}
{ “myShop” { “name”: “GitHub” “location”: { “city”: “San Francisco”
“address”: “88 Colin P Kelly Jr St” } } }
The Type System
{ myShop { name location { city address } products(orderby:
POPULARITY) { name price } } }
{ myShop { name location { city address } products(orderby:
POPULARITY) { name price } } } type QueryRoot { myShop: Shop shop(id: Int): Shop }
{ myShop { name location { city address } products(orderby:
POPULARITY) { name price } } } type Shop { name: String location: Address products(orderby: OrderEnum): [Product] } enum ProductOrderEnum { PRICE, POPULARITY, ALPHABETICAL }
{ myShop { name location { city address } products(orderby:
POPULARITY) { name price } } } type Address { city: String address: String }
{ myShop { name location { city address } products(orderby:
POPULARITY) { name price } } } type Product { name: String price: Int }
Server Client H ER E I S P RO DU
C T W I TH I D = 1 G ET P R OD U C T W IT H I D= 1
Server Client EX P O SES S C HE M
A O F AL L PO S SI B I L IT I ES ( T Y P E SYS T EM ) DATA R EQ UI R EM EN T S (G R AP H Q L LA N GUAG E )
Server Client O K H ER E’S EX AC T
LY T HE DATA YO U NEE D G I VE ME DATA O F T HAT PAR T IC U LA R S H AP E
Server Client product view v1 Product model v1 product view
v3 Product model v3 product view v2 Product model v2 Doesn’t care
One endpoint to rule them all
Web iOS App POS App Android App
Fragments
{ myShop { name location { city address } }
}
{ myShop { name …locationFragment } } fragment locationFragment on
Shop { location { city address } }
Mutations
{ createBlog(title: “my cool blog") { title } }
Introspection
None
IDE integration Static Validation Code Generation Auto Documentation
GraphQL on Rails
rails generate model Blog title:string content:string author_id:integer rails generate model
Author name:string class Blog < ActiveRecord::Base has_one :author end
GEM ‘GRAPHQL’
None
None
None
query allBlogs { blogs { title author { name }
} }
{ "data": { "blogs": [ { "title": "Intro to GraphQL",
"content": "Something something something. Blah blah blah. Etc etc etc.", "author": { "name": "Marc-Andre Giroux" } }, { "title": "Hello, it's me", "content": "I've been wondering", "author": { "name": "Marc-Andre Giroux" } }, { "title": "Hello, it's me", "content": "I've been wondering", "author": { "name": "Marc-Andre Giroux" } } ] } }
GraphiQL
MG I ROUX.M E G RAPH QL-SLACK .HE R OK
UA P P.COM/ Slack channel My blog graphql-ruby G IT HU B.COM /R MO SO LG O/ G R A P H Q L-R U BY Twitter @__ XUORI G__
Thank You :D