Save 37% off PRO during our Black Friday Sale! »

Embracing the Power of GraphQL

Embracing the Power of GraphQL

Fb5d018725ccbe7c4359e29edddb201d?s=128

Tim Griesser

July 13, 2017
Tweet

Transcript

  1. GRAPHQL EMBRACING THE POWER OF

  2. HELLO FULLSTACK CONF!

  3. ABOUT ME: @tgriesser

  4. WHY? WHAT? HOW?

  5. WHY? WHAT? HOW?

  6. WHY CHOOSE GRAPHQL?

  7. WHY CHOOSE ANYTHING?

  8. WHY CHOOSE ANYTHING? (new in software development)

  9. BECAUSE ALL THE COOL DEVELOPERS ARE USING IT

  10. BECAUSE ALL THE COOL DEVELOPERS ARE USING IT

  11. BECAUSE IT SOLVES A REAL PROBLEM

  12. BECAUSE IT SOLVES A REAL PROBLEM TM

  13. None
  14. PROBLEM?

  15. REST

  16. PROBLEM?

  17. WHAT PROBLEM?

  18. None
  19. None
  20. None
  21. None
  22. PROBLEM?

  23. PROBLEM:

  24. REST APIs can lead to a ton of custom complex

    logic on the front-end to handle results
  25. None
  26. Friction between front-end requirements & backend APIs when building apps

    with great experiences
  27. Performance issues due to network overhead & over/under fetching on

    the server to account for access patterns
  28. None
  29. None
  30. None
  31. None
  32. Performance issues due to network overhead & over/under fetching on

    the server to account for access patterns (half baked graphql)
  33. A strongly typed, self documenting specification can provide major tooling

    benefits out of the box
  34. Overall developer experience

  35. WE CAN DO BETTER

  36. WE CAN DO BETTER - Facebook, 2012

  37. WHY? WHAT? HOW?

  38. None
  39. WHAT IS GRAPHQL?

  40. WHERE DOES IT FIT IN MY STACK?

  41. CAN I USE GRAPHQL WITH $INSERT_DATA_STORE_HERE

  42. WHAT IS GRAPHQL?

  43. None
  44. A SPECIFICATION

  45. A SPECIFICATION (LANGUAGE AGNOSTIC)

  46. A SPECIFICATION (DATA SOURCE AGNOSTIC)

  47. A SPECIFICATION (Predictable)

  48. None
  49. Types

  50. Types ID, String, Float, Int, Boolean

  51. Types ID, String, Float, Int, Boolean List, Enum, ObjectTypes, InputObjectTypes

  52. Types ID, String, Float, Int, Boolean List, Enum, ObjectTypes, InputObjectTypes

    Queries, Mutations, Fragments
  53. Types ID, String, Float, Int, Boolean List, Enum, ObjectTypes, InputObjectTypes

    Queries, Mutations, Fragments Unions, Interfaces (Directives)
  54. Lots of terms!

  55. REST: Many simple endpoints

  56. GraphQL: A single smart endpoint

  57. Reference Implementation (GraphQL JS)

  58. WHY? WHAT? HOW?

  59. None
  60. YIKES!

  61. A TON OF RESOURCES

  62. WHERE TO BEGIN?

  63. None
  64. Apollo Client

  65. None
  66. None
  67. Apollo Server (express, hapi, koa, connect, restify)

  68. Apollo Codegen

  69. QUERIES + SCHEMA

  70. QUERIES + SCHEMA = TYPES

  71. DEMO TIME

  72. Performance issues, both due to network overhead & due to

    over/under fetching on the server to account for access patterns
  73. Naive resolvers will execute 12 queries

  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. DATALOADER • Elegantly solves the n+1 Query problem • As

    the Graph executes, you “load" a resource, which adds that ID to a queue • That queue is then flushed at the end of the execution of that level of the tree
  82. None
  83. None
  84. None
  85. None
  86. Promise

  87. None
  88. Promise

  89. select * from users where id in (…)

  90. With DataLoader: 3 queries

  91. GraphQL: Where does it fall short?

  92. Authorization is still something you need to consider…

  93. …though you’d need to anyway

  94. Mutations still feel like they need some refinement

  95. Errors take some getting used to

  96. 200 = valid formed query, any errors are specified as

    part of the response, incomplete payload
  97. My experience: it’s been awesome

  98. My experience: it’s been awesome

  99. How to sell it??

  100. Performance

  101. Performance

  102. Productivity

  103. None
  104. None
  105. Incremental adoption

  106. It gets simpler as you get further in

  107. Read up on other experiences:

  108. None
  109. None
  110. None
  111. None
  112. Tomorrow: 14:30

  113. Questions? @tgriesser