Introduction to GraphQL

Real World React November 17th, 2017

Transcript

1. An Introduction
   To GraphQL
   Real World React, November 16, 2017
   

   View Slide

2. Jon Wong
   Frontend Infrastructure,
   Coursera
   @jnwng
   2
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. A single endpoint for data from anywhere
   {
   book {
   author {
   tweets
   amazonReviews
   }
   }
   }
   8
   

   View Slide

9. Schemas
   Describing possible data
   

   View Slide

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

    View Slide

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

    View Slide

12. Execution
    ▪ Query execution utilizes the
    schema to figure out what to
    run, mapping them to
    “resolvers”
    12
    

    View Slide

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

    View Slide

14. Queries
    Reading your data
    

    View Slide

15. query {
    someField
    }
    { “data”: { “someField”: “someValue” }}
    15
    A simple query
    

    View Slide

16. query MyQueryName {
    fieldName
    }
    16
    A simple query with a name
    

    View Slide

17. query ($someArg: String) {
    fieldWithArg(name: $someArg)
    }
    17
    A simple query with arguments
    

    View Slide

18. query ($someArg: String) {
    fieldWithArg(name: $someArg)
    }
    +
    { “someArg”: “my-field-name” }
    18
    … which requires variables
    

    View Slide

19. query {
    smallPicture: picture(size: 100)
    mediumPicture: picture(size: 500)
    largePicture: picture(size: 2000)
    }
    19
    A simple query with aliases
    

    View Slide

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

    View Slide

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

    View Slide

22. 22
    A typical React application
    

    View Slide

23. 23
    … broken down into components ...
    

    View Slide

24. 24
    A complex query
    

    View Slide

25. 25
    A complex query
    

    View Slide

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

    View Slide

27. 27
    {course.title}
    {course.description}
    
    
    Breaking queries down with fragments
    query CoursePage {
    course(slug: “Machine Learning”) {
    title
    description
    ...University
    ...Instructor
    }
    }
    

    View Slide

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

    View Slide

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

    View Slide

30. Mutations
    Writing your data
    

    View Slide

31. mutation {
    addToCounter {
    count
    }
    }
    31
    A simple mutation
    {
    “data”: {
    “addToCounter”: {
    “count”: 1
    }
    }
    }
    

    View Slide

32. mutation {
    addToCounter {
    count
    }
    }
    32
    A simple mutation
    This is a query
    

    View Slide

33. mutation {
    addToCounter { count }
    second: addToCounter {
    count
    }
    }
    33
    Mutations execute serially
    {
    “data”: {
    “addToCounter”: { “count”: 1 },
    “second”: { “count”: 2 }
    }
    }
    

    View Slide

34. Clients
    Managing your data
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. The GraphQL HoC
    const Component = ({ data: { someField }}) =>
    {someField}
    export default graphql(gql`
    query { someField }
    `)(Component)
    38
    

    View Slide

39. View Slide

40. 40
    const Instructor = ({ data: { instructor }}) => (
    
    
    {instructor.name}
    
    );
    export default graphql(gql`
    query {
    instructor(id: 1) {
    name
    profile {
    ...ProfilePhoto
    }
    }
    }
    ${ProfilePhoto.fragment}
    `)(Instructor)
    

    View Slide

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

    View Slide

42. Servers
    Serving your data
    

    View Slide

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

    View Slide

44. Every field can be resolved separately.
    44
    const resolvers = {
    Query: {
    books: () => fetch('https://api.com/books')
    },
    Book: {
    reviews: () => return [],
    title: () => fetch(‘https://api.com/titles’)
    }
    };
    

    View Slide

45. A single endpoint for data from anywhere
    {
    book {
    author {
    tweets
    amazonReviews
    }
    }
    }
    45
    

    View Slide

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

    View Slide

47. Tools
    Supercharging your data
    

    View Slide

48. GraphiQL
    48
    

    View Slide

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

    View Slide

50. `apollo-codegen`
    50
    Catch runtime errors at compile-time
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. THANKS!
    55
    @jnwng
    Presentation template by SlidesCarnival
    

    View Slide