Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Exploring GraphQL
Marc-Andre Giroux
March 09, 2017
Programming
0
230
Exploring GraphQL
Marc-Andre Giroux
March 09, 2017
Tweet
Share
More Decks by Marc-Andre Giroux
See All by Marc-Andre Giroux
It Depends - Examining GraphQL Myths & Assumptions
xuorig
0
59
So you Want to Distribute your GraphQL Schema?
xuorig
4
650
So you Want to Distribute your GraphQL Schema?
xuorig
0
330
GraphQL Schema Design @ Scale
xuorig
5
1.9k
Continuous Evolution of GraphQL Schemas @ GitHub
xuorig
3
1.6k
GraphQL à Shopify
xuorig
0
180
GraphQL @ Shopify
xuorig
6
1.2k
GraphQL on Rails
xuorig
2
300
From REST to GraphQL
xuorig
9
1.1k
Other Decks in Programming
See All in Programming
Babylon.jsで作ったsceneをレイトレーシングで映えさせる
turamy
1
210
夕食断食にTRY!/for-lt-12th
pachikuriii
0
230
kintone × LINE Bot で餃子検定Botを作った話
naberina
0
330
10歳の minne から、これから長く続くプロダクトを作るすべての人へ
tsumichan
9
3.6k
Cloudflare WorkersでGoのHTTPサーバーを動かすライブラリを作った話
syumai
0
150
ちょっとつよい足トラ
logilabo
0
380
Introduction to Property-Based Testing @ COSCUP 2022
cybai
1
150
Computer Vision Seminar 1/コンピュータビジョンセミナーvol.1 OpenCV活用
fixstars
0
160
ファーストペンギンを志すものに伝えたい - 1人目のアジャイル推進者がたどった成功と失敗
psj59129
0
100
Git操作編
smt7174
2
240
SwiftUIで「意図」を伝える / swiftui_intention
uhooi
2
150
話題の AlloyDB は本当に凄いデータベースなのでプレビューを使い倒した #devio2022
maroon1st
0
13k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
940
Faster Mobile Websites
deanohume
294
28k
Code Reviewing Like a Champion
maltzj
506
37k
Agile that works and the tools we love
rasmusluckow
319
19k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
It's Worth the Effort
3n
172
26k
Six Lessons from altMBA
skipperchong
14
1.4k
Ruby is Unlike a Banana
tanoku
91
9.3k
We Have a Design System, Now What?
morganepeng
35
3k
StorybookのUI Testing Handbookを読んだ
zakiyama
6
2.5k
Clear Off the Table
cherdarchuk
79
290k
Transcript
Exploring GraphQL Marc-André Giroux @__xuorig__
None
None
None
@__xuorig__ REST APIs are Great.
@__xuorig__ Except when they're not.
@__xuorig__ Multiple round-trips are not ideal.
@__xuorig__ GET /people/1 GET /planet/2 GET /film/3
@__xuorig__ SELECT * FROM /ENDPOINT
@__xuorig__ GET /people/1 { "person": { "name": "luke" } }
@__xuorig__ { "name": "Luke Skywalker", "height": "172", "mass": "77", "hair_color":
"blond", "skin_color": "fair", "eye_color": "blue", "birth_year": "19BBY", "gender": "male", "homeworld": "http://swapi.co/api/ planets/1/", "films": [ "http://swapi.co/api/films/6/", "http://swapi.co/api/films/3/", "http://swapi.co/api/films/2/", "http://swapi.co/api/films/1/", "http://swapi.co/api/films/7/" ],
@__xuorig__ What do clients even use?
@__xuorig__ { "name": "Luke Skywalker", "height": "172", "mass": "77", "hair_color":
"blond", "skin_color": "fair", "eye_color": "blue", "birth_year": "19BBY", "gender": "male", "homeworld": "http://swapi.co/api/ planets/1/", "films": [ "http://swapi.co/api/films/6/", "http://swapi.co/api/films/3/", "http://swapi.co/api/films/2/", "http://swapi.co/api/films/1/", "http://swapi.co/api/films/7/" ],
GraphQL
@__xuorig__ A special type of database.
@__xuorig__ A library.
@__xuorig__ A Query Langage.
@__xuorig__ &
@__xuorig__ A Spec for servers to execute GraphQL Queries.
@__xuorig__ A GraphQL Hello World.
@__xuorig__ query { film { title } }
@__xuorig__ Anatomy of a GraphQL Query
@__xuorig__ query MyQuery { film { title } }
@__xuorig__ query MyQuery { film { title } } Operation
Type
@__xuorig__ query MyQuery { film { title } } Operation
Name
@__xuorig__ query MyQuery { film { title } } Selection
Set
@__xuorig__ query MyQuery { film { title } } Field
@__xuorig__ • Lexed • Parsed • Validated • Executed
@__xuorig__ "data": { "film": { "title": "A New Hope" }
}
@__xuorig__ query { film(id: "123") { title } }
@__xuorig__ query { film(id: "123") { title characters { name
} } }
@__xuorig__ "data": { "film": { "title": "A New Hope", "characters":
[ { "name": "Luke Skywalker" }, { "name": "Princess Leia" } ] } }
@__xuorig__ The Type System.
@__xuorig__ { film(id: "123") { title characters { name }
} }
@__xuorig__ { film(id: "123") { title characters { name }
} } type QueryRoot { film(id: ID!): Film }
@__xuorig__ { film(id: "123") { title characters { name }
} } type Film { title: String! characters: [Character!]! }
@__xuorig__ { film(id: "123") { title characters { name }
} } type Character { name: String! }
@__xuorig__ Introspection.
@__xuorig__ { __schema { types { name } } }
@__xuorig__ { __type(name: "Film") { name description } }
@__xuorig__ Introspection == Clients with Super Powers
@__xuorig__ • AutoComplete • Client side validation • IDE Integration
• Code Generation
@__xuorig__ GraphiQL
@__xuorig__
@__xuorig__ swapi-graphql-ruby.herokuapp.com
Mutations
@__xuorig__ mutation { addFilm(name: "StarWars 8") { title } }
Fragments
@__xuorig__ query { film(id: "123") { title characters { name
} } bestRatedfilm { title characters { name } } }
@__xuorig__ query { film(id: "123") { title characters { name
} } bestRatedfilm { title characters { name } } }
@__xuorig__ fragment filmFragment on Film { title characters { name
} }
@__xuorig__ query { film(id: "123") { ...filmFragment } bestRatedfilm {
...filmFragment } } fragment filmFragment on Film { title characters { name } }
@__xuorig__ Versioning
@__xuorig__ Versioning Continuous Evolution
@__xuorig__ What about Security ?
@__xuorig__ • Maximum Depth • Query Complexity • Timeout
@__xuorig__ My HTTP Caching :( !
@__xuorig__ • Client Side Cache • Persisted Queries
@__xuorig__ GraphQL is Great.
@__xuorig__ A single roundtrip to fetch exactly what a client
needs.
@__xuorig__ Declarative and predictable. (no more SELECT *)
@__xuorig__ Servers express possibilities.
@__xuorig__ Clients define requirements.
@__xuorig__ That's real separation of concerns!
@__xuorig__ Great developer experience.
@__xuorig__ It makes us ship faster.
@__xuorig__ An everyone is happy.
Thank you! Marc-André Giroux @__xuorig__