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

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

  2. Jon Wong Frontend Infrastructure, Coursera @jnwng 2

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

    in GraphQL Language ▪ Schemas ▪ Queries 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 query { project(name: "GraphQL") {

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

    } 7 { "project": { "tagline": "A query language for APIs" } }
  8. Schemas Describing possible data

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

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

    ▪ No runtime errors for query documents 10
  11. The GraphQL Schema gives us the basis of everything that

    is possible when communicating to the server from the client. 11
  12. Queries Reading your data

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

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

    author } } { "project": { "tagline": "A query language for APIs", “author”: “jnwng” } }
  15. Fragments fragment MyFancyFragment on MyResource { someField } 15 These

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

    ...MyFancyFragment } } 16 These two types should match
  17. 17 A typical React application

  18. 18 … broken down into components ...

  19. 19 A complex query

  20. 20 A complex query

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

    { title description ...University ...Instructor } }
  22. 22 ▪ Components can be more portable ▪ Components are

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

    needs, in the form that it needs it in. 23
  24. Clients Managing your data

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

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

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

    27 query DetailView ($id: ID) { bookById(id: $id) { name } }
  28. Clients make adopting GraphQL in your application a breeze. 28

  29. Servers Serving your data

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

    title author } } 32
  33. GraphQL servers are flexible 33 ▪ They can act as

    proxies to existing data ▪ They can also act as the business logic layer itself
  34. Tools Supercharging your data

  35. GraphiQL 35

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

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

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

    more effective. 38
  39. ▪ GraphQL makes it really simple to query lots of

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

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

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