GraphQL

 GraphQL

7a0e72a6f55811246bb5d9a946fd2e49?s=128

Radoslav Stankov

August 15, 2015
Tweet

Transcript

  1. 3.
  2. 4.
  3. 5.
  4. 6.
  5. 8.
  6. 9.
  7. 10.
  8. 11.
  9. 12.
  10. 14.
  11. 15.
  12. 22.
  13. 23.
  14. 24.
  15. 25.
  16. 26.
  17. 27.
  18. 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" } }
  19. 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
  20. 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
  21. 32.
  22. 34.
  23. 38.
  24. 39.

    Rest Client Rest Server endpoint 1 feature 1 endpoint 2

    feature 2 endpoint 3 feature 3 endpoint N feature N
  25. 40.
  26. 41.
  27. 42.
  28. 43.
  29. 44.

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

    { id: 1, name: "Radoslav Stankov",
 photo: "/speaker/photo/1/thumb.jpg" } }
  30. 46.
  31. 48.

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

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

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

    track speaker { id name picture } } } }
 
 GET /graphql Request Body Response Body
  33. 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
  34. 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.
  35. 55.

    GraphQL • Single endpoint • Not just a library •

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

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

    bloat • Documentation • Ad Hoc Endpoints • Structure issues
  37. 59.
  38. 60.

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

    title track speaker { id name picture } } } }
 
 

  39. 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 } }] } } }
  40. 62.
  41. 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": {
  42. 64.

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

    photo(size: 100)
 bigPhoto: photo(size: 400) } } Cool tricks
  43. 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
  44. 66.
  45. 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
  46. 68.
  47. 69.
  48. 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" } }],
  49. 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" } }]
  50. 75.
  51. 76.