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
820
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
How to Be Effective Javascript Developer
rstankov
0
59
Dealing with Dependencies in JavaScript
rstankov
0
17
Building tools on top of Apollo
rstankov
0
27
React Architecture at Product Hunt
rstankov
2
90
React Component Anti-Patterns
rstankov
0
480
How to an effective developer
rstankov
0
140
Domain Driven Design Kinda
rstankov
1
420
Testing React Hooks with Confidence
rstankov
1
140
Product Development
rstankov
2
130
Other Decks in Technology
See All in Technology
私見「UNIXの考え方」/20230124-kameda-unix-phylosophy
opelab
0
150
マイクロサービス宣言から8年 振り返りとこれから / Eight Years After the Microservices Declaration A Look Back and A Look Ahead
eisuke
2
130
【NGK2023S】 ノードエディタ形式の画像処理ツール「Image-Processing-Node-Editor」
kazuhitotakahashi
0
210
FlexScan HD2452Wの 後継を探して
tring
0
280
PCL (Point Cloud Library)の基本となぜ点群処理か_2023年_第2版.pdf
cvmlexpertguide
0
130
USB PD で迎える AC アダプター大統一時代
puhitaku
0
620
OpenShiftのリリースノートを整理してみた
loftkun
2
180
CUEとKubernetesカスタムオペレータを用いた新しいネットワークコントローラをつくってみた
hrk091
0
220
オンプレk8sとEKSの並行運用の実際
ch1aki
0
130
ROS_Japan_UG_#49_LT
maeharakeisuke
0
200
230120 ガンダムの事例にみる自動化の対象 Haruka Oh!さん
comucal
PRO
0
110
JAWS-UG朝会_41_NakagawaAkihiro.pptx.pdf
anakagawa
2
620
Featured
See All Featured
Producing Creativity
orderedlist
PRO
335
37k
Thoughts on Productivity
jonyablonski
49
2.7k
Embracing the Ebb and Flow
colly
75
3.6k
Debugging Ruby Performance
tmm1
67
11k
Raft: Consensus for Rubyists
vanstee
130
5.7k
In The Pink: A Labor of Love
frogandcode
132
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
Building Adaptive Systems
keathley
27
1.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
31
1.8k
WebSockets: Embracing the real-time Web
robhawkes
58
6k
Typedesign – Prime Four
hannesfritz
34
1.5k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
13
5.4k
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?