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

Embracing the Power of GraphQL

Embracing the Power of GraphQL

Tim Griesser

July 13, 2017
Tweet

More Decks by Tim Griesser

Other Decks in Programming

Transcript

  1. GRAPHQL
    EMBRACING THE POWER OF

    View full-size slide

  2. HELLO FULLSTACK CONF!

    View full-size slide

  3. ABOUT ME: @tgriesser

    View full-size slide

  4. WHY?
    WHAT?
    HOW?

    View full-size slide

  5. WHY?
    WHAT?
    HOW?

    View full-size slide

  6. WHY
    CHOOSE GRAPHQL?

    View full-size slide

  7. WHY
    CHOOSE ANYTHING?

    View full-size slide

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

    View full-size slide

  9. BECAUSE ALL THE COOL
    DEVELOPERS ARE USING IT

    View full-size slide

  10. BECAUSE ALL THE COOL
    DEVELOPERS ARE USING IT

    View full-size slide

  11. BECAUSE IT SOLVES
    A REAL PROBLEM

    View full-size slide

  12. BECAUSE IT SOLVES
    A REAL PROBLEM TM

    View full-size slide

  13. WHAT PROBLEM?

    View full-size slide

  14. REST APIs can lead to a ton of
    custom complex logic on the
    front-end to handle results

    View full-size slide

  15. Friction between front-end
    requirements & backend APIs
    when building apps
    with great experiences

    View full-size slide

  16. Performance issues due to network
    overhead & over/under
    fetching on the server to account for
    access patterns

    View full-size slide

  17. Performance issues due to network
    overhead & over/under
    fetching on the server to account for
    access patterns (half baked graphql)

    View full-size slide

  18. A strongly typed, self
    documenting specification can
    provide major tooling benefits
    out of the box

    View full-size slide

  19. Overall
    developer experience

    View full-size slide

  20. WE CAN DO BETTER

    View full-size slide

  21. WE CAN DO BETTER
    - Facebook, 2012

    View full-size slide

  22. WHY?
    WHAT?
    HOW?

    View full-size slide

  23. WHAT IS GRAPHQL?

    View full-size slide

  24. WHERE DOES IT FIT
    IN MY STACK?

    View full-size slide

  25. CAN I USE GRAPHQL WITH
    $INSERT_DATA_STORE_HERE

    View full-size slide

  26. WHAT IS GRAPHQL?

    View full-size slide

  27. A SPECIFICATION

    View full-size slide

  28. A SPECIFICATION
    (LANGUAGE AGNOSTIC)

    View full-size slide

  29. A SPECIFICATION
    (DATA SOURCE AGNOSTIC)

    View full-size slide

  30. A SPECIFICATION
    (Predictable)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. Types
    ID, String, Float, Int, Boolean
    List, Enum, ObjectTypes, InputObjectTypes
    Queries, Mutations, Fragments
    Unions, Interfaces (Directives)

    View full-size slide

  35. Lots of terms!

    View full-size slide

  36. REST:
    Many simple endpoints

    View full-size slide

  37. GraphQL:
    A single smart endpoint

    View full-size slide

  38. Reference Implementation (GraphQL JS)

    View full-size slide

  39. WHY?
    WHAT?
    HOW?

    View full-size slide

  40. A TON OF RESOURCES

    View full-size slide

  41. WHERE TO BEGIN?

    View full-size slide

  42. Apollo Client

    View full-size slide

  43. Apollo Server
    (express, hapi, koa, connect, restify)

    View full-size slide

  44. Apollo Codegen

    View full-size slide

  45. QUERIES + SCHEMA

    View full-size slide

  46. QUERIES + SCHEMA = TYPES

    View full-size slide

  47. Performance issues, both due to
    network overhead & due to over/under
    fetching on the server to account for
    access patterns

    View full-size slide

  48. Naive resolvers
    will execute 12
    queries

    View full-size slide

  49. 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

    View full-size slide

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

    View full-size slide

  51. With
    DataLoader:
    3 queries

    View full-size slide

  52. GraphQL:
    Where does it fall short?

    View full-size slide

  53. Authorization is still
    something you need to
    consider…

    View full-size slide

  54. …though you’d need
    to anyway

    View full-size slide

  55. Mutations still feel like
    they need some
    refinement

    View full-size slide

  56. Errors take some
    getting used to

    View full-size slide

  57. 200 = valid formed query, any
    errors are specified as part of the
    response, incomplete payload

    View full-size slide

  58. My experience: it’s been awesome

    View full-size slide

  59. My experience: it’s been awesome

    View full-size slide

  60. How to sell it??

    View full-size slide

  61. Productivity

    View full-size slide

  62. Incremental
    adoption

    View full-size slide

  63. It gets simpler as
    you get further in

    View full-size slide

  64. Read up on other
    experiences:

    View full-size slide

  65. Tomorrow: 14:30

    View full-size slide

  66. Questions?
    @tgriesser

    View full-size slide