$30 off During Our Annual Pro Sale. View Details »

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

  2. Jon Wong Frontend Infrastructure, Coursera @jnwng 2

  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
  4. Runtime ▪ Clients ▪ Servers ▪ Tools What We’re Covering

    in GraphQL Language ▪ Schemas ▪ Queries ▪ Operations 4
  5. What is GraphQL? Taken straight from GraphQL.org

  6. Describe your Data 6 type Project { name: String tagline:

    String contributors: [User] }
  7. Ask for What You Want 7 query { project(name: "GraphQL")

    { tagline } }
  8. Get Predictable Results 8 query { project(name: "GraphQL") { tagline

    } } { "project": { "tagline": "A query language for APIs" } } GraphQL JSON
  9. Schemas Describing possible data

  10. Describe everything that is possible ▪ All possible data results

    are described by the server. 10
  11. Describe everything that is possible 11 type Project { name:

    String tagline: String contributors: [User] }
  12. Discoverability ▪ Exploring an API is no longer a burden

    12
  13. GraphiQL 13

  14. Validation ▪ Every query is validated against the GraphQL schema

    ▪ No runtime errors for making API calls 14
  15. The GraphQL schema gives us the basis of everything that

    is possible when communicating to the server from the client. 15
  16. Queries Reading your data

  17. 17 A simple query query { project(name: "GraphQL") { tagline

    } } { "project": { "tagline": "A query language for APIs" } }
  18. 18 A simple query with a name query AQueryWithAName {

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

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

    { tagline } } { “projectName”: “react” } query variables
  21. query { react: project(name: “react”){ tagline } graphql: project(name: “graphql”)

    { tagline } } 21 A simple query with aliases
  22. 22 … which returns what you expect { “react”: {

    “tagline”: “A JavaScript library for building user interfaces” }, “graphql”: { “tagline”: “A query language for APIs” } }
  23. Fragments 23 fragment Contributors on Project { name contributors }

  24. 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!
  25. GraphQL queries allow the client to declare exactly what it

    needs, in the form that it needs it in. 25
  26. React && Queries Declarative + Composable

  27. 27 A typical React application

  28. 28 … broken down into components.

  29. 29 This is how we normally get the data fetch(‘/courses/machine-learning’)

    fetch(‘/partners/?course=machine-learning’) fetch(‘/instructors/?course=machine-learning’)
  30. 30 A complex GraphQL query query CoursePage { course(slug: “machine-learning”)

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

    { title description ...Partner ...Instructor } }
  32. 32 A complex GraphQL query fragment Partner on Course {

    partner { name logo } } fragment Instructor on Course { instructor { name title photoUrl } }
  33. 33 ▪ Components can be more portable ▪ Components are

    more self-sufficient. Every component can declare its own data requirements
  34. Clients Managing your data

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

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

  37. Caching 37 query ListView { allBooks { id name }

    } query DetailView ($id: ID) { bookById(id: $id) { name } }
  38. The GraphQL HoC 38 const ProjectTitle = ({ data: {

    project: { tagline } } }) => <h1>{tagline}</h1>; export default graphql(gql` query { project(name: “graphql”) { tagline } } `)(ProjectTitle);
  39. Clients make adopting GraphQL in your application a breeze. 39

  40. Servers Serving your data

  41. 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’) }, };
  42. Every field can be resolved separately. 42 const resolvers =

    { Project: { name: () => return ‘graphql’, tagline: () => 'A query language for APIs’, contributors: () => fetch(‘/users/?projectName=graphql’) } };
  43. GraphQL servers are flexible 43 ▪ They can act as

    proxies to existing data ▪ They can also become the business logic layer itself
  44. Tools Supercharging your data

  45. GraphiQL 45

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

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

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

    more effective. 48
  49. ▪ GraphQL makes it really simple to query lots of

    data, no matter where it is. 49 In Summary
  50. ▪ Just like React, GraphQL can break down complexity into

    composable, reusable pieces 50 In Summary
  51. ▪ GraphQL.org ▪ GraphQL.com ▪ https://launchpad.graphql.com/ new 51 How to

    Get Started
  52. THANKS! 52 @jnwng Presentation template by SlidesCarnival