Production Ready GraphQL

Eve Porcello

@eveporcello

eve@moonhighway.com

Tahoe City, CA

 

Agenda

  • Working with Defer/Stream
  • Schema Design
  • Rover
  • Federation

Timing

  • 1:30PM Pacific - Start
  • 2:30 - 2:40 - Break
  • 3:30 - 10:40 - Break
  • 4:30 - End

@defer & @stream

How Do You Get Things Done?

This Year....

  • Exercise every morning at 5:30am
  • Vegan Cooking every night
  • Meditate 3x a day
  • Triple Business Sales
  • Call my worst relatives once a week

January 3

{ }

Query

Response

{ }

Query

Response

Gateway

{ }

Query

Response

Gateway

Reviews

Colors

Accounts

How Does a Query Get Things Done

query {
  cat(name:"Biscuit") {
    name
    location
    mood
  }
}
{
  "data": {
    "cat": {
      "name":"Biscuit",
      "location": "Tahoe City",
      "mood": "pensive"
    }
  }
}

POST     /graphql

Query

How Does a Mutation Get Things Done

mutation {
  setLiftStatus(
    name:"Panorama", 
    newStatus: "hold"
  ) {
    name
    newStatus
    oldStatus
  }
}
{
  "data": {
    "setLiftStatus": {
      "name": "Panorama",
      "newStatus": "hold",
      "oldStatus": "open"
    }
  }
}

POST     /graphql

Mutation

How Do Subscriptions Get Things Done

subscription {
  liftStatusChange {
    name
    newStatus
    oldStatus
  }
}
{
  "data": {
    "setLiftStatus": {
      "name": "Panorama",
      "newStatus": "hold",
      "oldStatus": "open"
    }
  }
}

WebSockets

Subscription

{
  "data": {
    "setLiftStatus": {
      "name": "Astra Express",
      "newStatus": "closed",
      "oldStatus": "open"
    }
  }
}
{
  "data": {
    "setLiftStatus": {
      "name": "Panorama",
      "newStatus": "closed",
      "oldStatus": "open"
    }
  }
}

The GraphQL Spec

http://spec.graphql.org/draft/#sec-Language.Operations

query {
  cat(name: "Biscuit") {
    name
    location
    birthLocation
    weight
    gpa
    astrologicalSign
    hangingInThere
    bicyclePreference
    isADentist
    knowsADentist
    siblings {
      name
      location
    }
  }
}

do all of this

query {
  cat(name: "Biscuit") {
    name
    location
    birthLocation
    weight
    gpa
    astrologicalSign
    hangingInThere
    bicyclePreference
    isADentist
    knowsADentist
    siblings {
      name
      location
    }
  }
}

query {
  cat(name: "Biscuit") {
    name
    location
    birthLocation
    
    
    
    
    
    
    
    
    
    
    
  }
}

@stream

@defer

@defer Directive

query {
  cat(name: "Biscuit") {
    name
    location
    birthLocation
    weight
    ...ExtraneousCatDetails @defer
  }
}

fragment ExtraneousCatDetails on Cat {
    gpa
    astrologicalSign
    hangingInThere
    bicyclePreference
    isADentist
    knowsADentist
}

@stream

query {
  cat(name: "Biscuit") {
    name
    friends {
      name
    }
  }
}

query {
  cat(name: "Biscuit") {
    name
    friends @stream(initialCount: 3) {
      name
    }
  }
}

query {
  cat(name: "Biscuit") {
    name
    friends @stream(initialCount: 3) {
      name
      ...ExtraneousCatFields @defer
    }
  }
}

https://github.com/n1ru4l/graphql-bleeding-edge-playground

Where Can I Learn More?

Where can I try this?

Thank You!

  • Twitter: @eveporcello
  • Website: www.moonhighway.com
  • Mailing List: bit.ly/moonhighway