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

Introduction to GraphQL (Reactathon)

jnwng
March 20, 2018

Introduction to GraphQL (Reactathon)

Talk given at Reactathon 2018 3/20/2018

jnwng

March 20, 2018
Tweet

More Decks by jnwng

Other Decks in Technology

Transcript

  1. An Introduction
    To GraphQL
    Reactathon, March 20, 2018

    View full-size slide

  2. Jon Wong
    Frontend Infrastructure,
    Coursera
    @jnwng
    2

    View full-size slide

  3. Runtime
    ▪ Clients
    ▪ Servers
    ▪ Tools
    What We’re Covering in GraphQL
    Language
    ▪ Schemas
    ▪ Queries
    3

    View full-size slide

  4. What is GraphQL?
    Taken straight from GraphQL.org

    View full-size slide

  5. Describe your Data
    type Project {
    name: String
    tagline: String
    contributors: [User]
    }
    5

    View full-size slide

  6. Ask for What You Want
    query {
    project(name: "GraphQL") {
    tagline
    }
    }
    6

    View full-size slide

  7. Get Predictable Results
    query {
    project(name: "GraphQL") {
    tagline
    }
    }
    7
    {
    "project": {
    "tagline":
    "A query language for APIs"
    }
    }

    View full-size slide

  8. Schemas
    Describing possible data

    View full-size slide

  9. Describe everything that is possible
    ▪ All possible data results are
    described by the server.
    9

    View full-size slide

  10. Validation
    ▪ Every query is validated against
    the GraphQL schema
    ▪ No runtime errors for query
    documents
    10

    View full-size slide

  11. The GraphQL Schema
    gives us the basis of
    everything that is
    possible when
    communicating to the
    server from the client.
    11

    View full-size slide

  12. Queries
    Reading your data

    View full-size slide

  13. 13
    A simple query
    query {
    project(name: "GraphQL") {
    tagline
    }
    }
    {
    "project": {
    "tagline":
    "A query language for APIs"
    }
    }

    View full-size slide

  14. 14
    A simple query
    query {
    project(name: "GraphQL") {
    tagline
    author
    }
    }
    {
    "project": {
    "tagline":
    "A query language for APIs",
    “author”: “jnwng”
    }
    }

    View full-size slide

  15. Fragments
    fragment MyFancyFragment on MyResource {
    someField
    }
    15
    These are required!

    View full-size slide

  16. Spreading a fragment in a query
    query {
    someResource {
    ...MyFancyFragment
    }
    }
    16
    These two types
    should match

    View full-size slide

  17. 17
    A typical React application

    View full-size slide

  18. 18
    … broken down into components ...

    View full-size slide

  19. 19
    A complex query

    View full-size slide

  20. 20
    A complex query

    View full-size slide

  21. 21
    A complex query
    query CoursePage {
    course(slug: “Machine Learning”) {
    title
    description
    ...University
    ...Instructor
    }
    }

    View full-size slide

  22. 22
    ▪ Components can be more portable
    ▪ Components are more
    self-sufficient.
    Every component can declare its own
    data requirements

    View full-size slide

  23. GraphQL queries allow
    the client to declare
    exactly what it needs, in
    the form that it needs it
    in.
    23

    View full-size slide

  24. Clients
    Managing your data

    View full-size slide

  25. Clients make it easier to manage data
    Relay Apollo
    25

    View full-size slide

  26. Caching
    ▪ Clients provide advanced
    caching for GraphQL queries.
    26

    View full-size slide

  27. Caching
    query ListView {
    allBooks {
    id
    name
    }
    }
    27
    query DetailView ($id: ID) {
    bookById(id: $id) {
    name
    }
    }

    View full-size slide

  28. Clients make adopting
    GraphQL in your
    application a breeze.
    28

    View full-size slide

  29. Servers
    Serving your data

    View full-size slide

  30. Mapping types to resolvers
    30
    const schemaDefinition = `
    type Query {
    books: [Book]
    }
    type Book {
    title: String
    author: String
    }
    `;
    const resolvers = {
    Query: {
    books: () =>
    fetch('https://api.com/books')
    },
    };

    View full-size slide

  31. Every field can be resolved separately.
    31
    const resolvers = {
    Query: {
    books: () => fetch('https://api.com/books')
    },
    Book: {
    title: () => return ‘The book title’,
    author: () => fetch(‘https://api.com/authors’)
    }
    };

    View full-size slide

  32. A single endpoint for data from anywhere
    {
    books {
    title
    author
    }
    }
    32

    View full-size slide

  33. GraphQL servers are flexible
    33
    ▪ They can act as proxies to
    existing data
    ▪ They can also act as the
    business logic layer itself

    View full-size slide

  34. Tools
    Supercharging your data

    View full-size slide

  35. `eslint-plugin-graphql`
    36
    Catch invalid API calls at compile-time

    View full-size slide

  36. `apollo-codegen`
    37
    Catch runtime errors at compile-time

    View full-size slide

  37. GraphQL enables an
    entire ecosystem of tools
    to make developers more
    effective.
    38

    View full-size slide

  38. ▪ GraphQL makes it really simple
    to query lots of data, no matter
    where it is.
    39
    In Summary

    View full-size slide

  39. ▪ Just like React, GraphQL can
    break down complexity into
    composable, reusable pieces
    40
    In Summary

    View full-size slide

  40. ▪ GraphQL.org
    ▪ GraphQL.com
    ▪ https://launchpad.graphql.com/
    new
    41
    How to Get Started

    View full-size slide

  41. THANKS!
    42
    @jnwng
    Presentation template by SlidesCarnival

    View full-size slide