GraphQL

 GraphQL

7a0e72a6f55811246bb5d9a946fd2e49?s=128

Radoslav Stankov

August 15, 2015
Tweet

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?