GraphQL Workshop
Eve Porcello
@eveporcello
eve@moonhighway.com
Tahoe City, CA
- GraphQL Refresher
- Building an API with Apollo Server
- Apollo Client Basics
Agenda
GraphQL is a query language for your API.
{ }
{ }
Query
Response
DSL
How We Get Data with REST
/lifts/panorama
/trails/ocean-breeze
Noice!
/trails/songstress
/trails/hemmed-slacks
/trails/blackhawk
[
{
"name": "Panorama",
"type": "gondola",
"capacity": 8,
"status": "open",
"manufacturer": "Garaventa",
"built": 2014,
"summer": true,
"night": false,
"elevation_gain": 2800,
"time": "9 minutes",
"hours": "9:00am - 4:00pm",
"updated": "9:45am",
"trails": [
"/class/api/snowtooth/trails/ocean-breeze",
"/class/api/snowtooth/trails/songstress",
"/class/api/snowtooth/trails/hemmed-slacks",
"/class/api/snowtooth/trails/blackhawk"
]
}
]{
"name": "Ocean Breeze",
"lift": [
"/class/api/snowtooth/lifts/panorama"
],
"difficulty": "intermediate",
"status": "open",
"groomed": false,
"snowmaking": false,
"trees": true,
"night": true
}{
"name": "Hemmed Slacks",
"lift": [
"/class/api/snowtooth/lifts/panorama"
],
"difficulty": "intermediate",
"status": "open",
"groomed": false,
"snowmaking": false,
"trees": true,
"night": false
}{
"name": "Songstress",
"lift": [
"/class/api/snowtooth/lifts/panorama"
],
"difficulty": "expert",
"status": "closed",
"groomed": false,
"snowmaking": false,
"trees": true,
"night": false
}{
"name": "Blackhawk",
"lift": [
"/class/api/snowtooth/lifts/astra-express",
"/class/api/snowtooth/lifts/panorama"
],
"difficulty": "intermediate",
"status": "open",
"groomed": false,
"snowmaking": false,
"trees": false,
"night": false
}
/lifts/panorama
/trails/ocean-breeze
/trails/songstress
/trails/hemmed-slacks
/trails/blackhawk
How We Get Data with GraphQL
That's what's up
query {
lift(name:"Panorama") {
status
trails {
name
status
}
}
}{
"data":{
"lift":{
"status":"hold",
"trails": [
{
"name": "Hot Potato",
"status": "open"
},
{
"name": "West Elm",
"status": "closed"
}
]
}
}
}POST /graphql
Query
https://skiresort.com/graphql
How We Change Data with REST
/lifts/panorama
[
{
"name": "Panorama",
"type": "gondola",
"capacity": 8,
"status": "open",
"manufacturer": "Garaventa",
"built": 2014,
"summer": true,
"night": false,
"elevation_gain": 2800,
"time": "9 minutes",
"hours": "9:00am - 4:00pm",
"updated": "9:45am",
"trails": [
"/class/api/snowtooth/trails/ocean-breeze",
"/class/api/snowtooth/trails/songstress",
"/class/api/snowtooth/trails/hemmed-slacks",
"/class/api/snowtooth/trails/blackhawk"
]
}
]PUT
-H 'Content-Type: application/json'
-d { "status": "open" }How We Change Data with GraphQL
mutation {
setLiftStatus(
name:"Panorama",
newStatus: "hold"
) {
name
newStatus
oldStatus
}
}{
"data": {
"setLiftStatus": {
"name": "Panorama",
"newStatus": "hold",
"oldStatus": "open"
}
}
}POST /graphql
Mutation
{ }
Query
Response
{ }
Query
Response
fn( )
fn( )
fn( )
fn( )
fn( )
fn( )
{ }
Query
Response
https://pet-library.moonhighway.com
GraphQL - Apollo
By Moon Highway
