GraphQL

Video: https://www.youtube.com/watch?v=T2cucknCd6M

Transcript

1. GraphQL Radoslav Stankov 15/08/2015
2. Radoslav Stankov @rstankov http://rstankov.com
 http://blog.rstankov.com http://github.com/rstankov
7. https://github.com/rstankov/it-tour
13. GET /api/events/15/sessions { id: 175, start_at: "11:00", title: "GraphQL", speaker_id: 1, track: 2, }
16. GET /api/speakers/1 { id: "1", name: "Radoslav Stankov" }
17. Rest Client Rest Server
18. Rest Client Rest Server /api/event/15/sessions
19. Rest Client Rest Server /api/event/15/sessions /api/speakers/{x} (for 13 speakers)
20. Rest Client Rest Server /api/event/15/sessions /api/speakers/{x} (for 13 speakers)
21. …approach 2
22. GET /api/events/15/sessions { id: 175, start_at: "11:00", title: "GraphQL", track: 2, speaker: { id: 1, name: "Radoslav Stankov" } }
28. 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" } }
29. …but over time
30. { 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
31. 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
33. …approach 3
35. Rest Client Rest Server
36. Rest Client Rest Server endpoint 1 feature 1
37. Rest Client Rest Server endpoint 1 feature 1 endpoint 2 feature 2
38. Rest Client Rest Server endpoint 1 feature 1 endpoint 2 feature 2 endpoint 3 feature 3
39. Rest Client Rest Server endpoint 1 feature 1 endpoint 2 feature 2 endpoint 3 feature 3 endpoint N feature N
44. { id: 175, start_at: "11:00", title: "GraphQL", track: 2, speaker: { id: 1, name: "Radoslav Stankov",
 photo: "/speaker/photo/1/thumb.jpg" } }
45. { id start_at title track speaker: { id name
 photo } }
47. GET /graphql Request Body Response Body
48. 
 { event(id: 15) { sessions { id start_at title track speaker { id name picture } } } }
 
 GET /graphql Request Body Response Body
49. 
 { event(id: 15) { sessions { id start_at title track speaker { id name picture } } } }
 
 GET /graphql Request Body Response Body
50. 
 { 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
51. It is that simple
52. 
 https://facebook.github.io/graphql

53. 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.
54. Architecture 
 GraphQL Library
 (Per-Language)
 
 Type
 Definitions
 
 Application
 Code

55. GraphQL • Single endpoint • Not just a library • Application-Layer Protocol • Server agnostic • Strongly-typed • Client-specified queries • Hierarchical
56. Tries to solve • N+1 API queries • API response bloat • Documentation • Ad Hoc Endpoints • Structure issues
57. 
 https://facebook.github.io/react

58. 
 https://facebook.github.io/relay

60. Query 
 { event(id: 15) { sessions { id start_at title track speaker { id name picture } } } }
 
 

61. 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 } }] } } }
62. Mutation 
 mutation RootMutationType { createSpeaker(name: "Rado") { id } } { "data": { "createSpeaker": { "id": 2 } } }
63. 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": {
64. { id start_at title track speaker: { id name
 smallPhoto: photo(size: 100)
 bigPhoto: photo(size: 400) } } Cool tricks
65. query withFragments { user(id: 4) { friends(first: 10) { ...friendFields } mutualFriends(first: 10) { ...friendFields } } } fragment friendFields on User { id name profilePic(size: 50) } Cool tricks
66. Demo
67. 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
70. http://jsonapi.org/
71. { "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" } }],
72. "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" } }]
73. https://speakerdeck.com/rstankov/graphql
74. https://github.com/rstankov/talks-code
77. @rstankov Thanks :)
78. Questions?