$30 off During Our Annual Pro Sale. View Details »

GraphQL by a Skeptic

GraphQL by a Skeptic

There is much hype around GraphQL around these days - like there seems to be for so many other tools lately.

Popularity isn't a guarantee of quality, but that doesn't mean a popular thing can't be good either. In this talk I present the basics ideas behind GraphQL, how those ideas are implemented, and what those decisions mean in a production environment, exploring both their benefits and shortcomings.

Pablo Astigarraga

November 26, 2017
Tweet

More Decks by Pablo Astigarraga

Other Decks in Technology

Transcript

  1. GraphQL
    por un escéptico
    1

    View Slide

  2. Hola!

    View Slide

  3. Gracias

    View Slide

  4. pote.io

    View Slide

  5. usecacao.co

    View Slide

  6. 6
    GraphQL
    por un escéptico

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. GraphQL

    View Slide

  11. Facebook

    View Slide

  12. API

    View Slide

  13. REST

    View Slide

  14. Resources

    View Slide

  15. Actions

    View Slide

  16. GET /comments HTTP/1.1

    View Slide

  17. POST /comments HTTP/1.1
    {
    "text": ""
    }

    View Slide

  18. DELETE /comments/1 HTTP/1.1

    View Slide

  19. HTTP

    View Slide

  20. Query
    Language

    View Slide

  21. /

    View Slide

  22. Let’s fetch
    a record

    View Slide

  23. SQL

    View Slide

  24. SELECT name
    FROM humans
    WHERE id = 1;

    View Slide

  25. GraphQL

    View Slide

  26. human(id: 1) {
    name
    }

    View Slide

  27. human(id: 1) {
    name
    }

    View Slide

  28. human(id: 1) {
    name
    }

    View Slide

  29. human(id: 1) {
    name
    }

    View Slide

  30. {
    "data": {
    "human": {
    "name": "Luke"
    }
    }
    }

    View Slide

  31. {
    "data": {
    "human": {
    "name": "Luke"
    }
    }
    }

    View Slide

  32. {
    "data": {
    "human": {
    "name": "Luke"
    }
    }
    }

    View Slide

  33. human(id: 1) {
    name
    friends {
    name
    }
    }

    View Slide

  34. human(id: 1) {
    name
    friends {
    name
    }
    }

    View Slide

  35. human(id: 1) {
    name
    friends {
    name
    }
    }

    View Slide

  36. {
    "data": {
    "human": {
    "name": "Luke",
    "friends": [
    {"name": "Han” },
    {"name": "Leia"},
    {"name": "Obi-wan”}
    ]
    }
    }
    }

    View Slide

  37. {
    "data": {
    "human": {
    "name": "Luke",
    "friends": [
    {"name": "Han” },
    {"name": "Leia"},
    {"name": "Obi-wan”}
    ]
    }
    }
    }

    View Slide

  38. {
    human(id: 1) {
    name
    }
    droid(id: 1) {
    name
    }
    }

    View Slide

  39. {
    "data": {
    "human": {
    "name": "Luke",
    },
    “droid”: {
    “name”: “R2-D2”
    }
    }
    }

    View Slide

  40. {
    human(id: 1) {
    name
    friends {
    name
    friends {…}
    }
    }
    droid(id: 1) {
    name
    }
    }

    View Slide

  41. Query
    Language

    View Slide

  42. View Slide

  43. View Slide

  44. How do
    languages
    work?

    View Slide

  45. Human
    to
    Machine

    View Slide

  46. {
    human(id: 1) {
    name
    friends {
    name
    }
    }
    }

    View Slide

  47. Parse

    View Slide

  48. {
    human(id: 1) {
    name
    friends {
    name
    }
    }
    }

    View Slide

  49. Abstract
    Syntax
    Tree

    View Slide

  50. Execute

    View Slide

  51. Type System

    View Slide

  52. type Human {
    name: String
    friends: [Human]
    }

    View Slide

  53. type Human {
    name: String
    friends: [Human]
    }

    View Slide

  54. type Human {
    name: String
    friends: [Human]
    }

    View Slide

  55. Query
    definitions

    View Slide

  56. human(id: Int!): Human

    View Slide

  57. human(id: Int!): Human

    View Slide

  58. human(id: Int!): Human

    View Slide

  59. human(id: Int!): Human

    View Slide

  60. human(id: Int!): Human

    View Slide

  61. human(id: Int!): Human

    View Slide

  62. Resolver
    functions

    View Slide

  63. human(obj, args, context) {
    let data = // SELECT * FROM
    // humans WHERE
    // id = args.id
    return new Human(data)
    }

    View Slide

  64. human(obj, args, context) {
    let data = // SELECT * FROM
    // humans WHERE
    // id = args.id
    return new Human(data)
    }

    View Slide

  65. human(obj, args, context) {
    let data = // SELECT * FROM
    // humans WHERE
    // id = args.id
    return new Human(data)
    }

    View Slide

  66. human(obj, args, context) {
    let data = // SELECT * FROM
    // humans WHERE
    // id = args.id
    return new Human(data)
    }

    View Slide

  67. name(obj, args, context) {
    return obj.name
    }

    View Slide

  68. name(obj, args, context) {
    return obj.name
    }

    View Slide

  69. Expose it

    View Slide

  70. app.use(
    '/',
    graphqlHTTP({
    schema: MyAPIDefinition,
    })
    );

    View Slide

  71. app.use(
    '/',
    graphqlHTTP({
    schema: MyAPIDefinition,
    })
    );

    View Slide

  72. app.use(
    '/',
    graphqlHTTP({
    schema: MyAPIDefinition,
    })
    );

    View Slide

  73. app.use(
    '/',
    graphqlHTTP({
    schema: MyAPIDefinition,
    })
    );

    View Slide

  74. Resources

    View Slide

  75. Serialisation

    View Slide

  76. Transport

    View Slide

  77. Types
    and
    resolvers

    View Slide

  78. Schema is
    everything

    View Slide

  79. Tradeoffs

    View Slide

  80. Single request

    View Slide

  81. View Slide

  82. View Slide

  83. "slim"
    requests

    View Slide

  84. {
    "created_at": "2017-11-24 17:42:11
    -0300",
    "updated_at": "2017-11-24 16:52:11
    -0300”,
    ...
    "text": "this is an angry comment"
    }

    View Slide

  85. {
    "text": "this is an angry comment"
    }

    View Slide

  86. Optimal
    network
    roundtrips

    View Slide

  87. View Slide

  88. View Slide

  89. View Slide

  90. View Slide

  91. Non-optimal
    database usage

    View Slide

  92. Less
    granularity

    View Slide

  93. {
    "errors": [
    {
    "message": "Variable \"$id\" of required
    type \"ID!\" was not provided.",
    "locations": [
    {
    "line": 1,
    "column": 17
    }
    ]
    }
    ]
    }

    View Slide

  94. {
    "errors": [
    {
    "message": "Variable \"$id\" of required
    type \"ID!\" was not provided.",
    "locations": [
    {
    "line": 1,
    "column": 17
    }
    ]
    }
    ]
    }

    View Slide

  95. {
    "errors": [
    {
    "message": "Variable \"$id\" of required
    type \"ID!\" was not provided.",
    "locations": [
    {
    "line": 1,
    "column": 17
    }
    ]
    }
    ]
    }

    View Slide

  96. {
    "errors": [
    {
    "message": "Variable \"$id\" of required
    type \"ID!\" was not provided.",
    "locations": [
    {
    "line": 1,
    "column": 17
    }
    ]
    }
    ]
    }

    View Slide

  97. Caching

    View Slide

  98. Less HTTP

    View Slide

  99. More
    complexity

    View Slide

  100. More
    coupling

    View Slide

  101. (maybe)
    Less
    maintainability

    View Slide

  102. Type
    system

    View Slide

  103. View Slide

  104. (maybe)
    More patience

    View Slide

  105. Tradeoffs

    View Slide

  106. ¯\_(ツ)_/¯

    View Slide

  107. View Slide

  108. View Slide

  109. View Slide

  110. Gracias!

    View Slide

  111. View Slide

  112. pote.io

    View Slide