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

An Introduction to GraphQL (ReactJS SF Bay Area)

jnwng
April 12, 2018

An Introduction to GraphQL (ReactJS SF Bay Area)

A beginner-level introduction to GraphQL

jnwng

April 12, 2018
Tweet

More Decks by jnwng

Other Decks in Technology

Transcript

  1. An Introduction
    To GraphQL
    ReactJS SF Bay Area, 4/12/2018

    View full-size slide

  2. Jon Wong
    Frontend Infrastructure,
    Coursera
    @jnwng
    2

    View full-size slide

  3. Who is this talk for?
    ▪ Folks who deal with complex React
    applications
    ▪ Folks who use APIs (like REST) on a
    day-to-day basis
    ▪ Folks who want to know more about
    GraphQL!
    3

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Schemas
    Describing possible data

    View full-size slide

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

    View full-size slide

  11. Describe everything that is possible
    11
    type Project {
    name: String
    tagline: String
    contributors: [User]
    }

    View full-size slide

  12. Discoverability
    ▪ Exploring an API is no longer a
    burden
    12

    View full-size slide

  13. Validation
    ▪ Every query is validated against
    the GraphQL schema
    ▪ No runtime errors for making
    API calls
    14

    View full-size slide

  14. The GraphQL schema
    gives us the basis of
    everything that is
    possible when
    communicating to the
    server from the client.
    15

    View full-size slide

  15. Queries
    Reading your data

    View full-size slide

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

    View full-size slide

  17. 18
    A simple query with a name
    query AQueryWithAName {
    project(name: "GraphQL") {
    tagline
    }
    }

    View full-size slide

  18. 19
    A simple query with arguments
    query ($projectName: String!){
    project(name: $projectName) {
    tagline
    }
    }

    View full-size slide

  19. 20
    … which requires variables
    query ($projectName: String!){
    project(name: $projectName) {
    tagline
    }
    }
    {
    “projectName”: “react”
    }
    query variables

    View full-size slide

  20. query {
    react: project(name: “react”){
    tagline
    }
    graphql: project(name: “graphql”) {
    tagline
    }
    }
    21
    A simple query with aliases

    View full-size slide

  21. 22
    … which returns what you expect
    {
    “react”: {
    “tagline”: “A JavaScript library for building user interfaces”
    },
    “graphql”: {
    “tagline”: “A query language for APIs”
    }
    }

    View full-size slide

  22. Fragments
    23
    fragment Contributors on Project {
    name
    contributors
    }

    View full-size slide

  23. Spreading a fragment in a query
    24
    query {
    project(name: "GraphQL") {
    tagline
    ...Contributors
    }
    }
    query {
    project(name: "GraphQL") {
    tagline
    name
    contributors
    }
    }
    These turn out the same!

    View full-size slide

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

    View full-size slide

  25. React && Queries
    Declarative + Composable

    View full-size slide

  26. 27
    A typical React application

    View full-size slide

  27. 28
    … broken down into components.

    View full-size slide

  28. 29
    This is how we normally get the data
    fetch(‘/courses/machine-learning’)
    fetch(‘/partners/?course=machine-learning’)
    fetch(‘/instructors/?course=machine-learning’)

    View full-size slide

  29. 30
    A complex GraphQL query
    query CoursePage {
    course(slug: “machine-learning”) {
    title
    description
    partner {
    name
    logo
    }
    instructor {
    name
    title
    photoUrl
    }
    }
    }

    View full-size slide

  30. 31
    A complex GraphQL query
    query CoursePage {
    course(slug: “machine-learning”) {
    title
    description
    ...Partner
    ...Instructor
    }
    }

    View full-size slide

  31. 32
    A complex GraphQL query
    fragment Partner on Course {
    partner {
    name
    logo
    }
    }
    fragment Instructor on Course {
    instructor {
    name
    title
    photoUrl
    }
    }

    View full-size slide

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

    View full-size slide

  33. Clients
    Managing your data

    View full-size slide

  34. Clients make it easier to manage data
    Relay Apollo
    35

    View full-size slide

  35. Caching
    ▪ Clients provide advanced
    caching for GraphQL queries.
    36

    View full-size slide

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

    View full-size slide

  37. The GraphQL HoC
    38
    const ProjectTitle = ({
    data: {
    project: { tagline }
    }
    }) => {tagline};
    export default graphql(gql`
    query {
    project(name: “graphql”) {
    tagline
    }
    }
    `)(ProjectTitle);

    View full-size slide

  38. Clients make adopting
    GraphQL in your
    application a breeze.
    39

    View full-size slide

  39. Servers
    Serving your data

    View full-size slide

  40. Mapping types to resolvers
    41
    const typeDefs = `
    type Query {
    projects: [Project]
    }
    type Project {
    name: String
    tagline: String
    contributors: [User]
    }
    `;
    const resolvers = {
    Query: {
    projects: () =>
    fetch('https://api.com/project’)
    },
    };

    View full-size slide

  41. Every field can be resolved separately.
    42
    const resolvers = {
    Project: {
    name: () => return ‘graphql’,
    tagline: () => 'A query language for APIs’,
    contributors: () => fetch(‘/users/?projectName=graphql’)
    }
    };

    View full-size slide

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

    View full-size slide

  43. Tools
    Supercharging your data

    View full-size slide

  44. `eslint-plugin-graphql`
    46
    Catch invalid API calls at compile-time

    View full-size slide

  45. `apollo-codegen`
    47
    Catch runtime errors at compile-time

    View full-size slide

  46. GraphQL enables an
    entire ecosystem of tools
    to make developers more
    effective.
    48

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. ▪ GraphQL.org
    ▪ GraphQL.com
    ▪ https://launchpad.graphql.com/
    new
    51
    How to Get Started

    View full-size slide

  50. THANKS!
    52
    @jnwng
    Presentation template by SlidesCarnival

    View full-size slide