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
1.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
95
So you Want to Distribute your GraphQL Schema?
xuorig
4
840
So you Want to Distribute your GraphQL Schema?
xuorig
0
580
GraphQL Schema Design @ Scale
xuorig
5
2.2k
Continuous Evolution of GraphQL Schemas @ GitHub
xuorig
3
2.1k
GraphQL à Shopify
xuorig
0
250
Exploring GraphQL
xuorig
0
270
GraphQL @ Shopify
xuorig
6
1.7k
GraphQL on Rails
xuorig
2
360
Other Decks in Programming
See All in Programming
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
590
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.8k
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.5k
CSC509 Lecture 05
javiergs
PRO
0
300
CSC509 Lecture 02
javiergs
PRO
0
410
CSC509 Lecture 01
javiergs
PRO
1
430
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
450
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
310
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
960
開発生産性を上げるための生成AI活用術
starfish719
1
170
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
330
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Bash Introduction
62gerente
615
210k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Designing Experiences People Love
moore
142
24k
Code Review Best Practice
trishagee
72
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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