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.

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