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
1k
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
79
So you Want to Distribute your GraphQL Schema?
xuorig
4
790
So you Want to Distribute your GraphQL Schema?
xuorig
0
470
GraphQL Schema Design @ Scale
xuorig
5
2.1k
Continuous Evolution of GraphQL Schemas @ GitHub
xuorig
3
2k
GraphQL à Shopify
xuorig
0
210
Exploring GraphQL
xuorig
0
250
GraphQL @ Shopify
xuorig
6
1.5k
GraphQL on Rails
xuorig
2
330
Other Decks in Programming
See All in Programming
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4.1k
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
1
290
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
860
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
440
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1k
Server Driven Compose With Firebase
skydoves
0
400
Pinia Colada が実現するスマートな非同期処理
naokihaba
2
160
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
9
4.1k
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.7k
Universal Linksの実装方法と陥りがちな罠
kaitokudou
1
220
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Facilitating Awesome Meetings
lara
49
6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Designing Experiences People Love
moore
138
23k
Building Your Own Lightsaber
phodgson
102
6.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
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