rethinking data with
GraphQL
@ryanchenkie
ryan chenkie
angular/node consultant
google developer expert
angularcasts.io
ryanchenkie.com
let's
talk
about
REST
some downsides
- Fairly rigid
- Endpoints are all or nothing
- Separate HTTP calls
- Data isn’t cached
- Some agreed-upon patterns, but nothing explicit
- Gets messy as the API grows
- Hard to debug
what if we could...
Let clients ask for what they need and want
Make one API call instead of many
Make our APIs versionless
Make our API expose functions instead of endpoints
with
graphql
we can
let's look at queries
query {
allCourses {
id
}
}{
"data": {
"allCourses": [
{
"id": "1"
},
{
"id": "2"
},
{
"id": "3"
}
]
}
}
query {
allCourses {
id
name
description
}
}{
"data": {
"allCourses": [
{
"id": "1",
"name": "Functional JavaScript",
"description": "Because FUN"
},
{
"id": "2",
"name": "Intro to HTML",
"description": "Start somewhere"
},
{
"id": "3",
"name": "Intro to Machine Learning",
"description": "Learn machines"
}
]
}
}
query {
Course(id: 1) {
id
name
description
}
}
{
"data": {
"Course": {
"id": "1",
"name": "Functional JavaScript",
"description": "Because FUN"
}
}
}
query {
firstStudent: Student(id: 4) {
id
firstName
lastName
}
lastStudent: Student(id: 5) {
id
firstName
lastName
}
}
{
"data": {
"firstStudent": {
"id": "4",
"firstName": "John",
"lastName": "Doe"
},
"lastStudent": {
"id": "5",
"firstName": "Jane",
"lastName": "Smith"
}
}
}
query {
Student(id: 4) {
id
firstName
lastName
Courses {
...course
}
}
}
fragment course on Course {
id
name
level
}{
"data": {
"Student": {
"id": "4",
"firstName": "John",
"lastName": "Doe",
"Courses": [
{
"id": "1",
"name": "Functional JavaScript",
"level": "200"
},
{
"id": "2",
"name": "Intro to HTML",
"level": "100"
}
]
}
}
}demo
going
beyond
queries
servers require schemas
github.com/marmelab/json-graphql-server
bit.ly/rethinking-data-graphql
thank you!
@ryanchenkie