Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

6ed7c9c01ba124114f965ad3660bc276?s=128

Pablo Astigarraga

November 26, 2017
Tweet

Transcript

  1. GraphQL por un escéptico 1

  2. Hola!

  3. Gracias ❤

  4. pote.io

  5. usecacao.co

  6. 6 GraphQL por un escéptico

  7. None
  8. None
  9. None
  10. GraphQL

  11. Facebook

  12. API

  13. REST

  14. Resources

  15. Actions

  16. GET /comments HTTP/1.1

  17. POST /comments HTTP/1.1 { "text": "<insert angry rant here>" }

  18. DELETE /comments/1 HTTP/1.1

  19. HTTP

  20. Query Language

  21. /

  22. Let’s fetch a record

  23. SQL

  24. SELECT name FROM humans WHERE id = 1;

  25. GraphQL

  26. human(id: 1) { name }

  27. human(id: 1) { name }

  28. human(id: 1) { name }

  29. human(id: 1) { name }

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

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

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

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

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

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

  36. { "data": { "human": { "name": "Luke", "friends": [ {"name":

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

    "Han” }, {"name": "Leia"}, {"name": "Obi-wan”} ] } } }
  38. { human(id: 1) { name } droid(id: 1) { name

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

    “name”: “R2-D2” } } }
  40. { human(id: 1) { name friends { name friends {…}

    } } droid(id: 1) { name } }
  41. Query Language

  42. None
  43. None
  44. How do languages work?

  45. Human to Machine

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

    }
  47. Parse

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

    }
  49. Abstract Syntax Tree

  50. Execute

  51. Type System

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

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

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

  55. Query definitions

  56. human(id: Int!): Human

  57. human(id: Int!): Human

  58. human(id: Int!): Human

  59. human(id: Int!): Human

  60. human(id: Int!): Human

  61. human(id: Int!): Human

  62. Resolver functions

  63. human(obj, args, context) { let data = // SELECT *

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

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

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

    FROM // humans WHERE // id = args.id return new Human(data) }
  67. name(obj, args, context) { return obj.name }

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

  69. Expose it

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

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

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

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

  74. Resources

  75. Serialisation

  76. Transport

  77. Types and resolvers

  78. Schema is everything

  79. Tradeoffs

  80. Single request

  81. None
  82. None
  83. "slim" requests

  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" }
  85. { "text": "this is an angry comment" }

  86. Optimal network roundtrips

  87. None
  88. None
  89. None
  90. None
  91. Non-optimal database usage

  92. Less granularity

  93. { "errors": [ { "message": "Variable \"$id\" of required type

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

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

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

    \"ID!\" was not provided.", "locations": [ { "line": 1, "column": 17 } ] } ] }
  97. Caching

  98. Less HTTP

  99. More complexity

  100. More coupling

  101. (maybe) Less maintainability

  102. Type system

  103. None
  104. (maybe) More patience

  105. Tradeoffs

  106. ¯\_(ツ)_/¯

  107. None
  108. None
  109. None
  110. Gracias!

  111. None
  112. pote.io