An Introduction
To GraphQL
ReactJS SF Bay Area, 4/12/2018
Slide 2
Slide 2 text
Jon Wong
Frontend Infrastructure,
Coursera
@jnwng
2
Slide 3
Slide 3 text
Who is this talk for?
▪ Folks who deal with complex React
applications
▪ Folks who use APIs (like REST) on a
day-to-day basis
▪ Folks who want to know more about
GraphQL!
3
Slide 4
Slide 4 text
Runtime
▪ Clients
▪ Servers
▪ Tools
What We’re Covering in GraphQL
Language
▪ Schemas
▪ Queries
▪ Operations
4
Slide 5
Slide 5 text
What is GraphQL?
Taken straight from GraphQL.org
Slide 6
Slide 6 text
Describe your Data
6
type Project {
name: String
tagline: String
contributors: [User]
}
Slide 7
Slide 7 text
Ask for What You Want
7
query {
project(name: "GraphQL") {
tagline
}
}
Slide 8
Slide 8 text
Get Predictable Results
8
query {
project(name: "GraphQL") {
tagline
}
}
{
"project": {
"tagline": "A query language for APIs"
}
}
GraphQL JSON
Slide 9
Slide 9 text
Schemas
Describing possible data
Slide 10
Slide 10 text
Describe everything that is possible
▪ All possible data results are
described by the server.
10
Slide 11
Slide 11 text
Describe everything that is possible
11
type Project {
name: String
tagline: String
contributors: [User]
}
Slide 12
Slide 12 text
Discoverability
▪ Exploring an API is no longer a
burden
12
Slide 13
Slide 13 text
GraphiQL
13
Slide 14
Slide 14 text
Validation
▪ Every query is validated against
the GraphQL schema
▪ No runtime errors for making
API calls
14
Slide 15
Slide 15 text
The GraphQL schema
gives us the basis of
everything that is
possible when
communicating to the
server from the client.
15
Slide 16
Slide 16 text
Queries
Reading your data
Slide 17
Slide 17 text
17
A simple query
query {
project(name: "GraphQL") {
tagline
}
}
{
"project": {
"tagline": "A query language for APIs"
}
}
Slide 18
Slide 18 text
18
A simple query with a name
query AQueryWithAName {
project(name: "GraphQL") {
tagline
}
}
Slide 19
Slide 19 text
19
A simple query with arguments
query ($projectName: String!){
project(name: $projectName) {
tagline
}
}
query {
react: project(name: “react”){
tagline
}
graphql: project(name: “graphql”) {
tagline
}
}
21
A simple query with aliases
Slide 22
Slide 22 text
22
… which returns what you expect
{
“react”: {
“tagline”: “A JavaScript library for building user interfaces”
},
“graphql”: {
“tagline”: “A query language for APIs”
}
}
Slide 23
Slide 23 text
Fragments
23
fragment Contributors on Project {
name
contributors
}
Slide 24
Slide 24 text
Spreading a fragment in a query
24
query {
project(name: "GraphQL") {
tagline
...Contributors
}
}
query {
project(name: "GraphQL") {
tagline
name
contributors
}
}
These turn out the same!
Slide 25
Slide 25 text
GraphQL queries allow
the client to declare
exactly what it needs, in
the form that it needs it
in.
25
Slide 26
Slide 26 text
React && Queries
Declarative + Composable
Slide 27
Slide 27 text
27
A typical React application
Slide 28
Slide 28 text
28
… broken down into components.
Slide 29
Slide 29 text
29
This is how we normally get the data
fetch(‘/courses/machine-learning’)
fetch(‘/partners/?course=machine-learning’)
fetch(‘/instructors/?course=machine-learning’)
Slide 30
Slide 30 text
30
A complex GraphQL query
query CoursePage {
course(slug: “machine-learning”) {
title
description
partner {
name
logo
}
instructor {
name
title
photoUrl
}
}
}
Slide 31
Slide 31 text
31
A complex GraphQL query
query CoursePage {
course(slug: “machine-learning”) {
title
description
...Partner
...Instructor
}
}
Slide 32
Slide 32 text
32
A complex GraphQL query
fragment Partner on Course {
partner {
name
logo
}
}
fragment Instructor on Course {
instructor {
name
title
photoUrl
}
}
Slide 33
Slide 33 text
33
▪ Components can be more portable
▪ Components are more
self-sufficient.
Every component can declare its own
data requirements
Slide 34
Slide 34 text
Clients
Managing your data
Slide 35
Slide 35 text
Clients make it easier to manage data
Relay Apollo
35
Slide 36
Slide 36 text
Caching
▪ Clients provide advanced
caching for GraphQL queries.
36
Slide 37
Slide 37 text
Caching
37
query ListView {
allBooks {
id
name
}
}
query DetailView ($id: ID) {
bookById(id: $id) {
name
}
}
Slide 38
Slide 38 text
The GraphQL HoC
38
const ProjectTitle = ({
data: {
project: { tagline }
}
}) =>
Every field can be resolved separately.
42
const resolvers = {
Project: {
name: () => return ‘graphql’,
tagline: () => 'A query language for APIs’,
contributors: () => fetch(‘/users/?projectName=graphql’)
}
};
Slide 43
Slide 43 text
GraphQL servers are flexible
43
▪ They can act as proxies to
existing data
▪ They can also become the
business logic layer itself
Slide 44
Slide 44 text
Tools
Supercharging your data
Slide 45
Slide 45 text
GraphiQL
45
Slide 46
Slide 46 text
`eslint-plugin-graphql`
46
Catch invalid API calls at compile-time
Slide 47
Slide 47 text
`apollo-codegen`
47
Catch runtime errors at compile-time
Slide 48
Slide 48 text
GraphQL enables an
entire ecosystem of tools
to make developers more
effective.
48
Slide 49
Slide 49 text
▪ GraphQL makes it really simple
to query lots of data, no matter
where it is.
49
In Summary
Slide 50
Slide 50 text
▪ Just like React, GraphQL can
break down complexity into
composable, reusable pieces
50
In Summary
Slide 51
Slide 51 text
▪ GraphQL.org
▪ GraphQL.com
▪ https://launchpad.graphql.com/
new
51
How to Get Started
Slide 52
Slide 52 text
THANKS!
52
@jnwng
Presentation template by SlidesCarnival