Going GraphQL First

Presented at Real World React on 4/20/2017, this was a talk about GraphQL, its benefits for client developers, and how GraphQL makes it easier to build product!

Transcript

1. Going GraphQL First
   Real World React | 4/20/2017
   

   View Slide

2. Jon Wong
   @jnwng
   Frontend Infrastructure
   at Coursera
   

   View Slide

3. View Slide

4. APIs are hard
   

   View Slide

5. Chapter 1:
   Issues We’ve Had
   Chapter 2:
   What is GraphQL?
   Chapter 3:
   Why We Love
   GraphQL
   Chapter 4:
   Getting Started
   with GraphQL
   Some issues with data at Coursera
   5
   Backends can easily break clients

   API contracts are not automatically enforced on the client or server

   API Discoverability

   Finding the right REST endpoint is difficult. Knowing the expected
   request and response formats is even harder.

   

   View Slide

6. Chapter 1:
   Issues We’ve Had
   Chapter 2:
   What is GraphQL?
   Chapter 3:
   Why We Love
   GraphQL
   Chapter 4:
   Getting Started
   with GraphQL
   Some issues with data at Coursera
   6
   It’s hard for backend devs to build the perfect API
   Either you end up building a view-specific API

   or modular endpoints that need to be joined on the client.
   Performance

   Traversing through five entities requires five round-trips.
   

   View Slide

7. What is GraphQL?
   

   View Slide

8. Chapter 1:
   Issues We’ve Had
   Chapter 2:
   What is GraphQL?
   Chapter 3:
   Why We Love
   GraphQL
   Chapter 4:
   Getting Started
   with GraphQL
   8
   query {
   course(slug: "machine-learning") {
   name
   instructors {
   fullName
   university {
   name
   }
   }
   }
   }
   Its a language (with a specification)
   {
   data: {
   course: {
   name: "Machine Learning",
   instructors: [{
   fullName: "Andrew Ng",
   university: {
   name: "Stanford Univ."
   }
   }]
   }
   }
   }
   

   View Slide

9. Chapter 1:
   Issues We’ve Had
   Chapter 2:
   What is GraphQL?
   Chapter 3:
   Why We Love
   GraphQL
   Chapter 4:
   Getting Started
   with GraphQL
   9
   Here’s how it works on the server
   query {
   course(
   slug: ‘machine-learning’
   ) {
   name
   instructors {
   fullName
   university {
   name
   }
   }
   }
   }
   CourseResolver
   InstructorResolver
   UniversityResolver
   /api/courses/:slug
   /api/instructors/:id
   /api/universities/:id
   REST
   APIs
   

   View Slide

10. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    10
    All data is available in one place
    Clients don’t know (or care) about where data actually comes from
    All data is typed
    No longer will you have to guess what is provided by an endpoint.
    GraphQL enforces typing of all data.
    Its a single entry point for all your data
    

    View Slide

11. Why do we love GraphQL?
    11
    

    View Slide

12. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    12
    You get exactly what you want, and only what you want
    Request exactly the data you need for your product.
    GraphQL is declarative
    Worry about what your product needs, not how it gets there.
    Data usage evolves with the product
    Data declarations are composable, just like React.

    Use the same mental model!
    Inverting API control back to client developers
    

    View Slide

13. Let me show you.
    13
    

    View Slide

14. View Slide

15. View Slide

16. query CoursePage {

    course(slug: “machine-learning”) {

    title
    description
    }
    }
    
    

    View Slide

17. query CoursePage {

    course(slug: “machine-learning”) {

    title
    description
    }
    }
    university {
    name
    logo
    }
    
    
    

    View Slide

18. query CoursePage {

    course(slug: “machine-learning”) {

    title
    description
    }
    }
    university {
    name
    logo
    }
    instructor {
    name
    title
    }
    
    
    
    

    View Slide

19. query CoursePage {

    course(slug: “machine-learning”) {

    title
    description
    }
    }
    university {
    name
    logo
    }
    instructor {
    name
    title
    }
    profile {
    photo
    }
    
    
    
    
    

    View Slide

20. query CoursePage {

    course(slug: “machine-learning”) {

    title
    description
    }
    }
    university {
    name
    logo
    }
    instructor {
    name
    title
    }
    profile {
    photo
    }
    {course.title}
    {course.description}
    university={course.university}

    />
    instructor={course.instructor}
    />
    
    
    
    
    

    View Slide

21. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    21
    Every field in your query is validated
    All fields (even traversals between different models) are validated while writing
    code.
    Editor autocompletion against available backend data
    Modern editors can now autocomplete against server-side fields, so there’s no
    more guessing as to whether or not something exists.
    Code generation of static types for query allows validation of actual data
    usage, not just existence.
    We can generate Typescript and Flow bindings to ensure correct type usage at
    compile time.
    Providing schemas to client-side code
    

    View Slide

22. https://github.com/apollographql/eslint-plugin-graphql
    Linting
    

    View Slide

23. https://github.com/jimkyndemeyer/js-graphql-intellij-plugin
    IDE Support
    

    View Slide

24. https://github.com/apollographql/apollo-codegen/blob/master/test/flow/codeGeneration.js
    Flow / Typescript Support
    

    View Slide

25. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    25
    GraphQL is product-centric
    Think less about where your data comes from, and more about using that
    data.
    Query complexity should match product complexity
    Anything beyond this is a warning sign that something is wrong,

    and that more work can be delegated to the server.
    Schema-first development
    Client developers and backend developers can work in parallel once a
    schema is developed.
    Think about your product!
    

    View Slide

26. Getting Started with
    GraphQL
    

    View Slide

27. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    27
    Run your GraphQL server in the browser
    Your React application can use GraphQL today by building GraphQL
    resolvers in the client.
    Create a GraphQL server that delegates to existing endpoints.
    Packages like graphql-server make it super simple to build servers
    that can consume your downstream services.
    Backend-as-a-service
    Scaphold and Graphcool both provide GraphQL backends in the cloud
    Trying GraphQL out
    

    View Slide

28. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    28
    Caching
    Clients like Relay Modern and Apollo deal with caching out of the box,
    making it simple to build performant React / GraphQL applications.
    Drop-in support for GraphQL
    Clients makes it straightforward to make the best use of GraphQL
    throughout your application.
    Performance optimizations
    Instead of sending a seemingly endless query to the server,

    just send an ID instead.
    Using a GraphQL client
    

    View Slide

29. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    29
    We often don’t have the luxury of building from scratch.
    Trying to convince client and server developers to stop what
    they’re doing and use GraphQL is difficult.
    Opt for incremental adoption where possible.
    GraphQL clients make it easy to drop-in support
    Avoid disruption of backend services
    The GraphQL server is separate from the services it consumes, and
    allows backend developers to continue to provide business value.
    Innovate in place
    

    View Slide

30. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    30
    GraphQL.org
    The homepage of GraphQL is beautiful and contains a ton of in-
    depth materials on the in’s and out’s of GraphQL.
    LearnGraphQL.com
    Interactive GraphQL lessons to learn the various parts of the
    syntax.
    Apollo, GraphQL Slack
    Join the Apollo and GraphQL slacks for the latest about GraphQL.
    Resources
    

    View Slide

31. Thanks!
    Jon Wong

    @jnwng
    

    View Slide