Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
GraphQL
Radoslav Stankov
August 15, 2015
Technology
7
710
GraphQL
Video:
https://www.youtube.com/watch?v=T2cucknCd6M
Radoslav Stankov
August 15, 2015
Tweet
Share
More Decks by Radoslav Stankov
See All by Radoslav Stankov
rstankov
1
50
rstankov
1
33
rstankov
0
53
rstankov
1
420
rstankov
4
360
rstankov
2
100
rstankov
0
45
rstankov
1
91
rstankov
5
170
Other Decks in Technology
See All in Technology
oliva
7
1.2k
twada
PRO
7
2k
ihcomega56
1
580
udzura
2
260
viva_tweet_x
1
430
swoon
1
620
myajiri
0
320
karamem0
1
770
shirayanagiryuji
1
280
karabish
0
360
sat
40
29k
htomine
0
150
Featured
See All Featured
rocio
155
11k
schacon
145
6.6k
geeforr
332
29k
62gerente
587
200k
moore
125
21k
caitiem20
308
17k
chrislema
173
14k
jnunemaker
PRO
40
4.6k
brianwarren
82
4.7k
akmur
252
19k
bryan
100
11k
reverentgeek
27
2k
Transcript
GraphQL Radoslav Stankov 15/08/2015
Radoslav Stankov @rstankov http://rstankov.com http://blog.rstankov.com http://github.com/rstankov
None
None
None
None
https://github.com/rstankov/it-tour
None
None
None
None
None
GET /api/events/15/sessions { id: 175, start_at: "11:00", title: "GraphQL", speaker_id:
1, track: 2, }
None
None
GET /api/speakers/1 { id: "1", name: "Radoslav Stankov" }
Rest Client Rest Server
Rest Client Rest Server /api/event/15/sessions
Rest Client Rest Server /api/event/15/sessions /api/speakers/{x} (for 13 speakers)
Rest Client Rest Server /api/event/15/sessions /api/speakers/{x} (for 13 speakers)
…approach 2
GET /api/events/15/sessions { id: 175, start_at: "11:00", title: "GraphQL", track:
2, speaker: { id: 1, name: "Radoslav Stankov" } }
None
None
None
None
None
GET /api/events/15/sessions { id: 175, start_at: "11:00", title: "GraphQL", track:
2, speaker: { id: 1, name: "Radoslav Stankov", photo: "/speaker/photo/1/thumb.jpg" } }
…but over time
{ id: 175, start_at: "11:00", title: "GraphQL", track: 2, description:
"... stuff about Rado", speaker: { id: 1, name: "Radoslav Stankov", photo: "/speaker/photo/1/thumb.jpg", big_photo: "/speaker/photo/1/big.jpg", description: "... stuff about Rado", links: [ "http://rstankov.com", "http://blog.rstankov.com", "http://producthunt.com", ], GET /api/events/15/sessions
id: 175, start_at: "11:00", title: "GraphQL", track: 2, description: "...
stuff about Rado", speaker: { id: 1, name: "Radoslav Stankov", photo: "/speaker/photo/1/thumb.jpg", big_photo: "/speaker/photo/1/big.jpg", description: "... stuff about Rado", links: [ "http://rstankov.com", "http://blog.rstankov.com", "http://producthunt.com", ], alabla1: "foo bar", alabla2: "foo bar", alabla3: "foo bar" }, alabla1: "foo bar", alabla2: "foo bar", alabla3: "foo bar" } GET /api/events/15/sessions
None
…approach 3
None
Rest Client Rest Server
Rest Client Rest Server endpoint 1 feature 1
Rest Client Rest Server endpoint 1 feature 1 endpoint 2
feature 2
Rest Client Rest Server endpoint 1 feature 1 endpoint 2
feature 2 endpoint 3 feature 3
Rest Client Rest Server endpoint 1 feature 1 endpoint 2
feature 2 endpoint 3 feature 3 endpoint N feature N
None
None
None
None
{ id: 175, start_at: "11:00", title: "GraphQL", track: 2, speaker:
{ id: 1, name: "Radoslav Stankov", photo: "/speaker/photo/1/thumb.jpg" } }
{ id start_at title track speaker: { id name photo
} }
None
GET /graphql Request Body Response Body
{ event(id: 15) { sessions { id start_at title
track speaker { id name picture } } } } GET /graphql Request Body Response Body
{ event(id: 15) { sessions { id start_at title
track speaker { id name picture } } } } GET /graphql Request Body Response Body
{ event(id: 15) { sessions { id start_at title
track speaker { id name picture } } } } { "data": { "event": { "sessions": [{ "id": 175, "start_at": "11:00", "title": "GraphQL", "track": 2, "speaker": { "id": 1, "name": "Rado", "picture": null } }] } } } GET /graphql Request Body Response Body
It is that simple
https://facebook.github.io/graphql
GraphQL is a query language created by Facebook in 2012
which provides a common interface between the client and the server for data fetching and manipulations. The client asks for various data from the GraphQL server via queries.
Architecture GraphQL Library (Per-Language) Type Definitions Application
Code
GraphQL • Single endpoint • Not just a library •
Application-Layer Protocol • Server agnostic • Strongly-typed • Client-specified queries • Hierarchical
Tries to solve • N+1 API queries • API response
bloat • Documentation • Ad Hoc Endpoints • Structure issues
https://facebook.github.io/react
https://facebook.github.io/relay
None
Query { event(id: 15) { sessions { id start_at
title track speaker { id name picture } } } }
Query { event(id: 15) { sessions { id start_at
title track speaker { id name picture } } } } { "data": { "event": { "sessions": [{ "id": 175, "start_at": "11:00", "title": "GraphQL", "track": 2, "speaker": { "id": 1, "name": "Rado", "picture": null } }] } } }
Mutation mutation RootMutationType { createSpeaker(name: "Rado") { id }
} { "data": { "createSpeaker": { "id": 2 } } }
Documentation { __schema { types { name fields {
name type { name kind ofType { name kind } } } } } } { "data": { "__schema": { "types": [{ "name": "RootQueryType", "fields": [ { "name": "events", "type": { "name": null, "kind": "LIST", "ofType": { "name": "Event", "kind": "OBJECT" } } }, { "name": "event", "type": {
{ id start_at title track speaker: { id name smallPhoto:
photo(size: 100) bigPhoto: photo(size: 400) } } Cool tricks
query withFragments { user(id: 4) { friends(first: 10) { ...friendFields
} mutualFriends(first: 10) { ...friendFields } } } fragment friendFields on User { id name profilePic(size: 50) } Cool tricks
Demo
Issues • New, just a draft specification • No reliable
graphql server libraries, yet • No reliable graphql client libraries, yet • Mutations are weird • Best practices and solutions • Large datasets
None
None
http://jsonapi.org/
{ "links": { "self": "http://example.com/events/15/sessions", "next": "http://example.com/events/15/sessions?page[offset]=2", "last": "http://example.com/events/15/sessions?page[offset]=10" },
"data": [{ "type": "sesssion", "id": "175", "attributes": { "title": "GraphQL", "track": "2", "start_at": "11:00" }, "relationships": { "speaker": { "links": { "self": "http://varnaconf.com/sessions/175/relationships/speaker", "related": "http://varnaconf.com/speaker/1" }, "data": { "type": "speaker", "id": "1" } }, }, "links": { "self": "http://example.com/sessions/175" } }],
"attributes": { "title": "GraphQL", "track": "2", "start_at": "11:00" }, "relationships":
{ "speaker": { "links": { "self": "http://varnaconf.com/sessions/175/relationships/speaker", "related": "http://varnaconf.com/speaker/1" }, "data": { "type": "speaker", "id": "1" } }, }, "links": { "self": "http://example.com/sessions/175" } }], "included": [{ "type": "speaker", "id": "1", "attributes": { "name": "Radoslav Stankov", "picture": "/photos/1/small.jpg", }, "links": { "self": "http://varnaconf.com/speaker/1" } }]
https://speakerdeck.com/rstankov/graphql
https://github.com/rstankov/talks-code
None
None
@rstankov Thanks :)
Questions?