Introduction to GraphQL (Reactathon)

8685df8e9094c97cfbd47c48b6c741c6?s=47 jnwng
March 20, 2018

Introduction to GraphQL (Reactathon)

Talk given at Reactathon 2018 3/20/2018

8685df8e9094c97cfbd47c48b6c741c6?s=128

jnwng

March 20, 2018
Tweet

Transcript

  1. 3.

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

    in GraphQL Language ▪ Schemas ▪ Queries 3
  2. 7.

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

    } 7 { "project": { "tagline": "A query language for APIs" } }
  3. 10.

    Validation ▪ Every query is validated against the GraphQL schema

    ▪ No runtime errors for query documents 10
  4. 11.

    The GraphQL Schema gives us the basis of everything that

    is possible when communicating to the server from the client. 11
  5. 13.

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

    } } { "project": { "tagline": "A query language for APIs" } }
  6. 14.

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

    author } } { "project": { "tagline": "A query language for APIs", “author”: “jnwng” } }
  7. 16.

    Spreading a fragment in a query query { someResource {

    ...MyFancyFragment } } 16 These two types should match
  8. 21.

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

    { title description ...University ...Instructor } }
  9. 22.

    22 ▪ Components can be more portable ▪ Components are

    more self-sufficient. Every component can declare its own data requirements
  10. 23.

    GraphQL queries allow the client to declare exactly what it

    needs, in the form that it needs it in. 23
  11. 27.

    Caching query ListView { allBooks { id name } }

    27 query DetailView ($id: ID) { bookById(id: $id) { name } }
  12. 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') }, };
  13. 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’) } };
  14. 33.

    GraphQL servers are flexible 33 ▪ They can act as

    proxies to existing data ▪ They can also act as the business logic layer itself
  15. 39.

    ▪ GraphQL makes it really simple to query lots of

    data, no matter where it is. 39 In Summary
  16. 40.

    ▪ Just like React, GraphQL can break down complexity into

    composable, reusable pieces 40 In Summary