GraphQL

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

Transcript

1. GraphQL
   Radoslav Stankov 15/08/2015
   

   View Slide

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

   http://blog.rstankov.com
   
   http://github.com/rstankov
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

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

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

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

    View Slide

14. View Slide

15. View Slide

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

    View Slide

17. Rest Client
    Rest Server
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. …approach 2
    

    View Slide

22. GET /api/events/15/sessions
    {
    id: 175,
    start_at: "11:00",
    title: "GraphQL",
    track: 2,
    speaker: {
    id: 1,
    name: "Radoslav Stankov"
    }
    }
    

    View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

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"
    }
    }
    

    View Slide

29. …but over time
    

    View Slide

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
    

    View Slide

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
    

    View Slide

32. View Slide

33. …approach 3
    

    View Slide

34. View Slide

35. Rest Client
    Rest Server
    

    View Slide

36. Rest Client
    Rest Server
    endpoint 1
    feature 1
    

    View Slide

37. Rest Client
    Rest Server
    endpoint 1
    feature 1
    endpoint 2
    feature 2
    

    View Slide

38. Rest Client
    Rest Server
    endpoint 1
    feature 1
    endpoint 2
    feature 2
    endpoint 3
    feature 3
    

    View Slide

39. Rest Client
    Rest Server
    endpoint 1
    feature 1
    endpoint 2
    feature 2
    endpoint 3
    feature 3
    endpoint N
    feature N
    

    View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. {
    id: 175,
    start_at: "11:00",
    title: "GraphQL",
    track: 2,
    speaker: {
    id: 1,
    name: "Radoslav Stankov",

    photo: "/speaker/photo/1/thumb.jpg"
    }
    }
    

    View Slide

45. {
    id
    start_at
    title
    track
    speaker: {
    id
    name

    photo
    }
    }
    

    View Slide

46. View Slide

47. GET /graphql
    Request Body Response Body
    

    View Slide

48. 

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

    

    GET /graphql
    Request Body Response Body
    

    View Slide

49. 

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

    

    GET /graphql
    Request Body Response Body
    

    View Slide

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
    

    View Slide

51. It is that simple
    

    View Slide

52. 

    https://facebook.github.io/graphql

    

    View Slide

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.
    

    View Slide

54. Architecture
    

    GraphQL Library

    (Per-Language)

    

    Type

    Definitions

    

    Application

    Code

    

    View Slide

55. GraphQL
    • Single endpoint
    • Not just a library
    • Application-Layer Protocol
    • Server agnostic
    • Strongly-typed
    • Client-specified queries
    • Hierarchical
    

    View Slide

56. Tries to solve
    • N+1 API queries
    • API response bloat
    • Documentation
    • Ad Hoc Endpoints
    • Structure issues
    

    View Slide

57. 

    https://facebook.github.io/react

    

    View Slide

58. 

    https://facebook.github.io/relay

    

    View Slide

59. View Slide

60. Query
    

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

    

    

    

    View Slide

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
    }
    }]
    }
    }
    }
    

    View Slide

62. Mutation
    

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

    View Slide

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": {
    

    View Slide

64. {
    id
    start_at
    title
    track
    speaker: {
    id
    name

    smallPhoto: photo(size: 100)

    bigPhoto: photo(size: 400)
    }
    }
    Cool tricks
    

    View Slide

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
    

    View Slide

66. Demo
    

    View Slide

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
    

    View Slide

68. View Slide

69. View Slide

70. http://jsonapi.org/
    

    View Slide

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"
    }
    }],
    

    View Slide

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"
    }
    }]
    

    View Slide

73. https://speakerdeck.com/rstankov/graphql
    

    View Slide

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

    View Slide

75. View Slide

76. View Slide

77. @rstankov
    Thanks :)
    

    View Slide

78. Questions?
    

    View Slide