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

Going GraphQL First - ReactSF

jnwng
August 30, 2017

Going GraphQL First - ReactSF

Presented at ReactSF on 8/30/2017, this was a talk about GraphQL, its benefits for client developers, and how GraphQL makes it easier to build product!

jnwng

August 30, 2017
Tweet

More Decks by jnwng

Other Decks in Technology

Transcript

  1. Going GraphQL First
    ReactSF | 8/30/2017

    View full-size slide

  2. Jon Wong
    @jnwng
    Frontend Infrastructure
    at Coursera

    View full-size slide

  3. APIs can be hard to work with

    View full-size slide

  4. Chapter 1:
    APIs are hard
    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 full-size slide

  5. Chapter 1:
    APIs are hard
    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 full-size slide

  6. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    7

    View full-size slide

  7. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    8
    GraphQL is a

    query language,
    not a library.

    View full-size slide

  8. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    9
    query MyCoursesQuery {
    myCourses(limit: 5, sortBy: RECENT) {
    name
    slug
    instructors {
    firstName
    lastName
    university(filter: VISIBLE_TO_LEARNERS) {
    name
    country
    slug
    }
    }
    }
    }
    query MyCoursesQuery {
    myCourses(limit: 5, sortBy: RECENT) {
    name
    slug
    instructors {
    firstName
    lastName
    university(filter: VISIBLE_TO_LEARNERS) {
    name
    country
    slug
    }
    }
    }
    }
    query MyCoursesQuery {
    myCourses(limit: 5, sortBy: RECENT) {
    name
    slug
    instructors {
    firstName
    lastName
    university(filter: VISIBLE_TO_LEARNERS) {
    name
    country
    slug
    }
    }
    }
    }
    query MyCoursesQuery {
    myCourses(limit: 5, sortBy: RECENT) {
    name
    slug
    instructors {
    firstName
    lastName
    university(filter: VISIBLE_TO_LEARNERS) {
    name
    country
    slug
    }
    }
    }
    }

    View full-size slide

  9. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    10
    {
    "myCourses": [
    {
    "name": "Machine Learning",
    "slug": "machine-learning",
    "instructors": [
    {
    "firstName": "Andrew",
    "lastName": "Ng"
    "university": {
    "name": "Stanford University",
    "country": "United States",
    "slug": "stanford"
    }
    }]
    }]
    }

    View full-size slide

  10. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    11
    query MyCoursesQuery {
    myCourses(limit: 5, sortBy: RECENT) {
    name
    slug
    instructors {
    firstName
    lastName
    university(filter: VISIBLE_TO_LEARNERS) {
    name
    country
    slug
    }
    }
    }
    }
    {
    "myCourses": [{
    "name": "Machine Learning",
    "slug": "machine-learning",
    "instructors": [{
    "firstName": "Andrew",
    "lastName": "Ng"
    "university": {
    "name": "Stanford University",
    "country": "United States",
    “slug": "stanford"
    }
    }]
    }]
    }

    View full-size slide

  11. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    12

    View full-size slide

  12. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    13
    query CoursePage {

    course(slug: "machine-learning") {

    title
    description
    }
    }

    View full-size slide

  13. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    14
    query CoursePage {

    course(slug: "machine-learning") {

    title
    description
    }
    }

    university {
    name
    logo
    }

    View full-size slide

  14. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    15
    query CoursePage {

    course(slug: "machine-learning") {

    title
    description
    }
    }

    university {
    name
    logo
    }

    instructor {
    name
    title
    }

    View full-size slide

  15. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    16
    query CoursePage {

    course(slug: machine-learning") {

    title
    description
    }
    }

    university {
    name
    logo
    }

    instructor {
    name
    title
    }

    profile {
    photo
    }

    View full-size slide

  16. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    17
    All queries are backed

    by a typed schema

    View full-size slide

  17. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    18
    type root {
    myCourses(limit: Int, sortBy: COURSE_SORT): [Course]
    }
    enum COURSE_SORT {
    RECENT
    ENROLL_DATE
    }
    type Course {
    name: String
    slug: String
    instructors: [Instructor]
    }
    type Instructor {
    firstName: String
    lastName: String
    university(filter: VISIBILITY_FILTER): University
    }

    View full-size slide

  18. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    19

    View full-size slide

  19. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    20
    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 full-size slide

  20. Why do we love GraphQL?
    21

    View full-size slide

  21. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    22
    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 full-size slide

  22. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    23
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

  25. https://transform.now.sh/graphql-to-flow
    Flow / Typescript Support

    View full-size slide

  26. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    27
    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.
    Think about your product!

    View full-size slide

  27. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    28
    query {
    CoursesV1Resource {
    bySlug(slug: "machine-learning") {
    coursePurchases {
    transactions {
    transactionDate
    expirationDate
    }
    }
    certificates {
    certificateGrantDate
    certificateGrade
    }
    }
    offersCertificateForPurchase
    }
    EnterpriseProgramsV1Resource {
    myPrograms {
    eligibleCourses
    }
    }
    }
    query {
    CoursesV1Resource {
    bySlug(slug: "machine-learning") {
    coursePurchases {
    transactions {
    transactionDate
    expirationDate
    }
    }
    certificates {
    certificateGrantDate
    certificateGrade
    }
    }
    offersCertificateForPurchase
    }
    EnterpriseProgramsV1Resource {
    myPrograms {
    eligibleCourses
    }
    }
    }
    query {
    CoursesV1Resource {
    bySlug(slug: "machine-learning") {
    shouldShowUpsell
    }
    }
    }
    Actual Query Ideal Query
    28

    View full-size slide

  28. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    29
    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 full-size slide

  29. Getting Started with
    GraphQL

    View full-size slide

  30. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    31
    Run your GraphQL server in the browser
    Your React application can use GraphQL today by running GraphQL
    itself in the client. Or use launchpad.graphql.com!
    Create a GraphQL server that delegates to existing endpoints.
    Packages like apollo-server make it super simple to build servers
    that can consume your downstream services.
    Backend-as-a-service
    Scaphold and Graph.cool both provide GraphQL backends in the cloud
    Trying GraphQL out

    View full-size slide

  31. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    32
    Data declarations
    Specify exactly what data you need, wherever you use it.
    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.
    Using a GraphQL client

    View full-size slide

  32. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    33
    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 provide drop-in support
    Avoid disruption of backend services
    GraphQL is a layer on top of your backend services, not a
    replacement for them.
    Innovate in place

    View full-size slide

  33. Chapter 1:
    APIs are hard
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    34
    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.
    launchpad.graphql.com
    Stand up a GraphQL server from your browser! You can even hit
    this server from your local GraphQL
    Apollo, GraphQL Slack
    Join the Apollo and GraphQL slacks for the latest about GraphQL.
    Resources

    View full-size slide

  34. Thanks!
    Jon Wong

    @jnwng

    View full-size slide