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

    in GraphQL Language ▪ Schemas ▪ Queries ▪ Mutations 3
  2. Get Predictable Results { project(name: "GraphQL") { tagline } }

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

    author { tweets amazonReviews } } } 8
  4. Validation ▪ Every query is validated against the GraphQL schema

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

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

    is possible when communicating to the server from the client. 13
  7. query ($someArg: String) { fieldWithArg(name: $someArg) } + { “someArg”:

    “my-field-name” } 18 … which requires variables
  8. Spreading a fragment in a query query { someResource {

    ...MyFancyFragment } } 21 These two types should match
  9. 26 A complex query query CoursePage { course(slug: “Machine Learning”)

    { title description ...University ...Instructor } }
  10. 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 } }
  11. 28 ▪ Components can be more portable ▪ Components are

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

    needs, in the form that it needs it in. 29
  13. mutation { addToCounter { count } } 31 A simple

    mutation { “data”: { “addToCounter”: { “count”: 1 } } }
  14. mutation { addToCounter { count } second: addToCounter { count

    } } 33 Mutations execute serially { “data”: { “addToCounter”: { “count”: 1 }, “second”: { “count”: 2 } } }
  15. Caching query ListView { allBooks { id name } }

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

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

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

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

    proxies to existing data ▪ They can also become the business logic layer itself
  23. ▪ GraphQL makes it really simple to query lots of

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

    composable, reusable pieces 53 In Summary