{ }

Query

Response

{ }

Supergraph

subgraph

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
    }
  }
}

Available Now

In @apollo/client@latest