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

Introduction to GraphQL

jnwng
November 16, 2017

Introduction to GraphQL

Real World React November 17th, 2017

jnwng

November 16, 2017
Tweet

More Decks by jnwng

Other Decks in Technology

Transcript

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

  2. Jon Wong Frontend Infrastructure, Coursera @jnwng 2

  3. Runtime ▪ Clients ▪ Servers ▪ Tools What We’re Covering

    in GraphQL Language ▪ Schemas ▪ Queries ▪ Mutations 3
  4. What is GraphQL? Taken straight from GraphQL.org

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

    contributors: [User] } 5
  6. Ask for What You Want { project(name: "GraphQL") { tagline

    } } 6
  7. Get Predictable Results { project(name: "GraphQL") { tagline } }

    7 { "project": { "tagline": "A query language for APIs" } }
  8. A single endpoint for data from anywhere { book {

    author { tweets amazonReviews } } } 8
  9. Schemas Describing possible data

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

    are described by the server. 10
  11. Validation ▪ Every query is validated against the GraphQL schema

    ▪ No runtime errors for query documents 11
  12. Execution ▪ Query execution utilizes the schema to figure out

    what to run, mapping them to “resolvers” 12
  13. The GraphQL Schema gives us the basis of everything that

    is possible when communicating to the server from the client. 13
  14. Queries Reading your data

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

    15 A simple query
  16. query MyQueryName { fieldName } 16 A simple query with

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

    query with arguments
  18. query ($someArg: String) { fieldWithArg(name: $someArg) } + { “someArg”:

    “my-field-name” } 18 … which requires variables
  19. query { smallPicture: picture(size: 100) mediumPicture: picture(size: 500) largePicture: picture(size:

    2000) } 19 A simple query with aliases
  20. Fragments fragment MyFancyFragment on MyResource { someField } 20 These

    are required!
  21. Spreading a fragment in a query query { someResource {

    ...MyFancyFragment } } 21 These two types should match
  22. 22 A typical React application

  23. 23 … broken down into components ...

  24. 24 A complex query

  25. 25 A complex query

  26. 26 A complex query query CoursePage { course(slug: “Machine Learning”)

    { title description ...University ...Instructor } }
  27. 27 <h1>{course.title}</h1> <p>{course.description}</p> <University university={course.university} /> <Instructor instructor={course.instructor} /> Breaking

    queries down with fragments query CoursePage { course(slug: “Machine Learning”) { title description ...University ...Instructor } }
  28. 28 ▪ Components can be more portable ▪ Components are

    more self-sufficient. Every component can declare its own data requirements
  29. GraphQL queries allow the client to declare exactly what it

    needs, in the form that it needs it in. 29
  30. Mutations Writing your data

  31. mutation { addToCounter { count } } 31 A simple

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

    mutation This is a query
  33. mutation { addToCounter { count } second: addToCounter { count

    } } 33 Mutations execute serially { “data”: { “addToCounter”: { “count”: 1 }, “second”: { “count”: 2 } } }
  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 query ListView { allBooks { id name } }

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

    }}) => <span>{someField}</span> export default graphql(gql` query { someField } `)(Component) 38
  39. 39

  40. 40 const Instructor = ({ data: { instructor }}) =>

    ( <View> <ProfilePhoto profile={instructor.profile} /> <span>{instructor.name}</span> </View> ); export default graphql(gql` query { instructor(id: 1) { name profile { ...ProfilePhoto } } } ${ProfilePhoto.fragment} `)(Instructor)
  41. Clients make adopting GraphQL in your application a breeze. 41

  42. Servers Serving your data

  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') }, };
  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’) } };
  45. A single endpoint for data from anywhere { book {

    author { tweets amazonReviews } } } 45
  46. GraphQL servers are flexible 46 ▪ They can act as

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

  48. GraphiQL 48

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

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

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

    more effective. 51
  52. ▪ GraphQL makes it really simple to query lots of

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

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

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