GraphQL

Transcript

1. 1.

   GraphQL Radoslav Stankov 15/08/2015

2. 2.

   Radoslav Stankov @rstankov http://rstankov.com
 http://blog.rstankov.com http://github.com/rstankov

3. 3.

   None
4. 4.

   None
5. 5.

   None
6. 6.

   None
7. 7.

   https://github.com/rstankov/it-tour

8. 8.

   None
9. 9.

   None
10. 10.

    None
11. 11.

    None
12. 12.

    None
13. 13.

    GET /api/events/15/sessions { id: 175, start_at: "11:00", title: "GraphQL", speaker_id:

    1, track: 2, }
14. 14.

    None
15. 15.

    None
16. 16.

    GET /api/speakers/1 { id: "1", name: "Radoslav Stankov" }

17. 17.

    Rest Client Rest Server

18. 18.

    Rest Client Rest Server /api/event/15/sessions

19. 19.

    Rest Client Rest Server /api/event/15/sessions /api/speakers/{x} (for 13 speakers)

20. 20.

    Rest Client Rest Server /api/event/15/sessions /api/speakers/{x} (for 13 speakers)

21. 21.

    …approach 2

22. 22.

    GET /api/events/15/sessions { id: 175, start_at: "11:00", title: "GraphQL", track:

    2, speaker: { id: 1, name: "Radoslav Stankov" } }
23. 23.

    None
24. 24.

    None
25. 25.

    None
26. 26.

    None
27. 27.

    None
28. 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. 29.

    …but over time

30. 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. 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
32. 32.

    None
33. 33.

    …approach 3

34. 34.

    None
35. 35.

    Rest Client Rest Server

36. 36.

    Rest Client Rest Server endpoint 1 feature 1

37. 37.

    Rest Client Rest Server endpoint 1 feature 1 endpoint 2

    feature 2
38. 38.

    Rest Client Rest Server endpoint 1 feature 1 endpoint 2

    feature 2 endpoint 3 feature 3
39. 39.

    Rest Client Rest Server endpoint 1 feature 1 endpoint 2

    feature 2 endpoint 3 feature 3 endpoint N feature N
40. 40.

    None
41. 41.

    None
42. 42.

    None
43. 43.

    None
44. 44.

    { id: 175, start_at: "11:00", title: "GraphQL", track: 2, speaker:

    { id: 1, name: "Radoslav Stankov",
 photo: "/speaker/photo/1/thumb.jpg" } }
45. 45.

    { id start_at title track speaker: { id name
 photo

    } }
46. 46.

    None
47. 47.

    GET /graphql Request Body Response Body

48. 48.

    
 { event(id: 15) { sessions { id start_at title

    track speaker { id name picture } } } }
 
 GET /graphql Request Body Response Body
49. 49.

    
 { event(id: 15) { sessions { id start_at title

    track speaker { id name picture } } } }
 
 GET /graphql Request Body Response Body
50. 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. 51.

    It is that simple

52. 52.

    
 https://facebook.github.io/graphql


53. 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. 54.

    Architecture 
 GraphQL Library
 (Per-Language)
 
 Type
 Definitions
 
 Application


    Code

55. 55.

    GraphQL • Single endpoint • Not just a library •

    Application-Layer Protocol • Server agnostic • Strongly-typed • Client-specified queries • Hierarchical
56. 56.

    Tries to solve • N+1 API queries • API response

    bloat • Documentation • Ad Hoc Endpoints • Structure issues
57. 57.

    
 https://facebook.github.io/react


58. 58.

    
 https://facebook.github.io/relay


59. 59.

    None
60. 60.

    Query 
 { event(id: 15) { sessions { id start_at

    title track speaker { id name picture } } } }
 
 

61. 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. 62.

    Mutation 
 mutation RootMutationType { createSpeaker(name: "Rado") { id }

    } { "data": { "createSpeaker": { "id": 2 } } }
63. 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. 64.

    { id start_at title track speaker: { id name
 smallPhoto:

    photo(size: 100)
 bigPhoto: photo(size: 400) } } Cool tricks
65. 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. 66.

    Demo

67. 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
68. 68.

    None
69. 69.

    None
70. 70.

    http://jsonapi.org/

71. 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. 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. 73.

    https://speakerdeck.com/rstankov/graphql

74. 74.

    https://github.com/rstankov/talks-code

75. 75.

    None
76. 76.

    None
77. 77.

    @rstankov Thanks :)

78. 78.

    Questions?