GraphQL

Agenda

 

  • Server Overview

  • GraphQL Requests with HTTP

  • Understanding Apollo Client

  • Incorporating the useQuery and useMutation Hooks

  • Apollo and React

  • Understanding Context

  • Creating Custom Links

  • Client-side Schemas

  • Defining Caching Behaviors

Building the

Pet Library Schema

Keep In Mind:

  • What Clients Need

  • Specific, Consistent Naming

  • Custom Objects Over Scalar Values

Code First vs Schema First

enum PetCategory

DOG

CAT

STINGRAY

RABBIT

type Pet

id: ID!

name: String!

category: PetCategory!

        ...

HORSE

sleepAmount: Int

curious: Boolean

favoriteFood: String

floppy: Int

good: Boolean

chill: Boolean

fast: Boolean

streetsmart: Boolean

majestic: Boolean

interface Pet

type Cat implements Pet

id: ID!

name: String

...

sleepAmount: Int

curious: Boolean

id: ID!

name: String!

weight: Float

status: PetStatus

photo: Photo

dueDate: Date

inCareOf: Customer

type Dog implements Pet

id: ID!

name: String

...

good: Boolean

type Rabbit implements Pet

id: ID!

name: String

...

favoriteFood: String

floppy: Int

type Stingray 

implements Pet

id: ID!

name: String

...

chill: Boolean

fast: Boolean

type Horse 

implements Pet

id: ID!

name: String

...

streetsmart: Boolean

majestic: Boolean

type *TBDFuturePet 

implements Pet

id: ID!

name: String

...

newField: _____

newField: _____

Union Types

type Query {

    familyPets: [FamilyPets!]!

}

union FamilyPet = Cat | Dog

Query

query {
  familyPets {
    __typename
    ...on Cat {
      name
      weight
    }
    ...on Dog {
      name
      status
    }
  }
}

Unions and Interfaces

By Moon Highway

Unions and Interfaces

  • 633