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.

https://graphql.org/

{ }

{ }

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