GraphQL

Transcript

1. GraphQL Radoslav Stankov 15/08/2015

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

3. None
4. None
5. None
6. None

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

8. None
9. None
10. None
11. None
12. None

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

    1, track: 2, }
14. None
15. None

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" } }
23. None
24. None
25. None
26. None
27. None

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

33. …approach 3

34. None

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
40. None
41. None
42. None
43. None

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

    } }
46. None

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


59. None

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
68. None
69. None

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

75. None
76. None

77. @rstankov Thanks :)

78. Questions?