GraphQL
High level Overview
Starting point: REST
Frontend
Requests
Backend API
Resources
GET /users
GET /addresses
GET /orders
REST Limitations
Overfetching
Backend API
Frontend
GET /users
Requirement: Add a dropdown with all first names
<<Response>>
we just care about this
REST Limitations
Overfetching
Requirement: Add a dropdown with all first names
Select a User
Russel
Yasmeen
REST Limitations
Underfetching
Backend API
Frontend
Requirement: Create a list of users and their address
GET /users
<<Response>>
GET /addresses
<<Response>>
REST Limitations
Underfetching
Requirement: Create a list of users and their address
Russel Rogahn
03793 Jones Spring
Bethlehem, South Carolina
Yasmeen Welch
862 Bogisich Shoal
Lucindashire, Nabraska
GraphQL
Server Concern
Frontend Concern
GraphQL
Ask for what you want
GraphQL
HTTP
REST
GraphQL
GET
POST
PUT
DELETE
POST
Russel Rogahn
03793 Jones Spring
Bethlehem, South Carolina
Yasmeen Welch
862 Bogisich Shoal
Lucindashire, Nabraska
GraphQL
Ask for what you want
POST /graphql
<<Response>>
Backend API
Frontend
query {
users {
firstName
lastName,
address {
street
city
state
}
}
}[
{
"firstName": "Russell",
"lastName": "Rogahn",
"address": {
"street": "03793 Jones Spring",
"city": "Bethlehem",
"state": "South Carolina"
}
},
{
"firstName": "Yasmeen",
"lastName": "Welch",
"address": {
"id": 4,
"street": "862 Bogisich Shoal",
"city": "Lucindashire",
"state": "Nebraska"
}
}
]
Russel Rogahn
03793 Jones Spring
Bethlehem, South Carolina
Yasmeen Welch
862 Bogisich Shoal
Lucindashire, Nabraska
Query:
Result:
Ask for what you want
GraphQL
Automatic documentation
GraphQL
Basic usage
Queries (GET)
Mutations (POST, PUT/PATCH, DELETE)
Subscriptions (Websockets)
Queries
Usage
<<Response>>
{
"data": {
"hero": {
"name": "R2-D2",
"friends": [
{
"name": "Luke Skywalker"
},
{
"name": "Han Solo"
},
{
"name": "Leia Organa"
}
]
}
}
}query {
hero {
name
friends {
name
}
}
}POST /graphql
Queries with arguments
Usage
<<Response>>
{
"data": {
"human": {
"name": "Luke Skywalker",
"height": 1.72
}
}
}query {
human(id: "1000") {
name
height
}
}POST /graphql
Queries with sub arguments
Usage
<<Response>>
{
"data": {
"human": {
"name": "Luke Skywalker",
"height": 5.6430448
}
}
}query {
human(id: "1000") {
name
height(unit: FOOT)
}
}POST /graphql
Mutations
Usage
<<Response>>
{
"data": {
"link": {
"id": "link-1",
"description": "Cool Website"
}
}
}mutation {
link(url: "www.popmenu.com", description: "Cool Website") {
id
description
}
}POST /graphql
Subscriptions
Usage
Backend API
Client 1
Client 2
Subscribe to Restaurant
Update Restaurant
Update Menu
Client 3
Subscribe to Restaurant
Update Restaurant
Subscribe to Menu
POST /graphql
mutation {
updateRestaurant() {
...
}
}POST /graphql
mutation {
updateMenu() {
...
}
}Demo Time
