×
Copy
Open
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
An Introduction To GraphQL Reactathon, March 20, 2018
Slide 2
Slide 2 text
Jon Wong Frontend Infrastructure, Coursera @jnwng 2
Slide 3
Slide 3 text
Runtime ▪ Clients ▪ Servers ▪ Tools What We’re Covering in GraphQL Language ▪ Schemas ▪ Queries 3
Slide 4
Slide 4 text
What is GraphQL? Taken straight from GraphQL.org
Slide 5
Slide 5 text
Describe your Data type Project { name: String tagline: String contributors: [User] } 5
Slide 6
Slide 6 text
Ask for What You Want query { project(name: "GraphQL") { tagline } } 6
Slide 7
Slide 7 text
Get Predictable Results query { project(name: "GraphQL") { tagline } } 7 { "project": { "tagline": "A query language for APIs" } }
Slide 8
Slide 8 text
Schemas Describing possible data
Slide 9
Slide 9 text
Describe everything that is possible ▪ All possible data results are described by the server. 9
Slide 10
Slide 10 text
Validation ▪ Every query is validated against the GraphQL schema ▪ No runtime errors for query documents 10
Slide 11
Slide 11 text
The GraphQL Schema gives us the basis of everything that is possible when communicating to the server from the client. 11
Slide 12
Slide 12 text
Queries Reading your data
Slide 13
Slide 13 text
13 A simple query query { project(name: "GraphQL") { tagline } } { "project": { "tagline": "A query language for APIs" } }
Slide 14
Slide 14 text
14 A simple query query { project(name: "GraphQL") { tagline author } } { "project": { "tagline": "A query language for APIs", “author”: “jnwng” } }
Slide 15
Slide 15 text
Fragments fragment MyFancyFragment on MyResource { someField } 15 These are required!
Slide 16
Slide 16 text
Spreading a fragment in a query query { someResource { ...MyFancyFragment } } 16 These two types should match
Slide 17
Slide 17 text
17 A typical React application
Slide 18
Slide 18 text
18 … broken down into components ...
Slide 19
Slide 19 text
19 A complex query
Slide 20
Slide 20 text
20 A complex query
Slide 21
Slide 21 text
21 A complex query query CoursePage { course(slug: “Machine Learning”) { title description ...University ...Instructor } }
Slide 22
Slide 22 text
22 ▪ Components can be more portable ▪ Components are more self-sufficient. Every component can declare its own data requirements
Slide 23
Slide 23 text
GraphQL queries allow the client to declare exactly what it needs, in the form that it needs it in. 23
Slide 24
Slide 24 text
Clients Managing your data
Slide 25
Slide 25 text
Clients make it easier to manage data Relay Apollo 25
Slide 26
Slide 26 text
Caching ▪ Clients provide advanced caching for GraphQL queries. 26
Slide 27
Slide 27 text
Caching query ListView { allBooks { id name } } 27 query DetailView ($id: ID) { bookById(id: $id) { name } }
Slide 28
Slide 28 text
Clients make adopting GraphQL in your application a breeze. 28
Slide 29
Slide 29 text
Servers Serving your data
Slide 30
Slide 30 text
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') }, };
Slide 31
Slide 31 text
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’) } };
Slide 32
Slide 32 text
A single endpoint for data from anywhere { books { title author } } 32
Slide 33
Slide 33 text
GraphQL servers are flexible 33 ▪ They can act as proxies to existing data ▪ They can also act as the business logic layer itself
Slide 34
Slide 34 text
Tools Supercharging your data
Slide 35
Slide 35 text
GraphiQL 35
Slide 36
Slide 36 text
`eslint-plugin-graphql` 36 Catch invalid API calls at compile-time
Slide 37
Slide 37 text
`apollo-codegen` 37 Catch runtime errors at compile-time
Slide 38
Slide 38 text
GraphQL enables an entire ecosystem of tools to make developers more effective. 38
Slide 39
Slide 39 text
▪ GraphQL makes it really simple to query lots of data, no matter where it is. 39 In Summary
Slide 40
Slide 40 text
▪ Just like React, GraphQL can break down complexity into composable, reusable pieces 40 In Summary
Slide 41
Slide 41 text
▪ GraphQL.org ▪ GraphQL.com ▪ https://launchpad.graphql.com/ new 41 How to Get Started
Slide 42
Slide 42 text
THANKS! 42 @jnwng Presentation template by SlidesCarnival