Odyssey

GraphOS: From Development to Launch

Workshop introFollow-along: GraphOS ExplorerExercise: Explore ExplorerGraphOSExercise: Creating a supergraphFollow-along: Metrics and observabilityFollow-along: Using `@defer`Making changes to the supergraphFollow-along: Schema checks & deployFollow-along: Schema publishExercise: Schema checksWhat's in a supergraph?Exercise: Add a subgraphExercise: Exploring entities & rover devFollow-along: Connecting data with entitiesWhat's next?
7. Follow-along: Using `@defer`
1m

Follow-along: Using @defer

We've isolated our problem—fortunately, there's a way to break apart the really slow fields from everything else. This mechanism is called @defer.

The router has this built-in capability to handle fields in a query that resolve more slowly than the rest. Using the @defer directive, we can specify which fields to defer—meaning that our query doesn't have to wait on the slowest pieces before it can return some data.

🎯 Goal: Improve the client experience by using @defer.

To be deferred, a field needs to meet one of the following requirements:

  • It's a root field of the Query type
  • It's a field of any entity type
  1. Try running the operation below in Explorer.

    query GetRecipePage {
    recipe(id: "recOZrH0RhjSjATBp") {
    id
    name
    cookingTime
    prepTime
    readyTime
    servings
    instructions
    ingredients {
    text
    }
    }
    recentlyAddedRecipes {
    name
    cookingTime
    servings
    }
    }

    It takes a few seconds for the data to come back.

  2. Place your cursor on recentlyAddedRecipes, then right-click and select "Wrap with inline @defer fragment"

  3. Run the query again and check out the Response Timeline.

The Response Timeline lets us visualize how long it took for the various pieces of our query to resolve and send data back to us. We can see that by adding @defer to the recentlyAddedRecipes field, it no longer held up the rest of our query that was ready to return data much sooner.

Previous
Next

Share your questions and comments about this lesson

Your feedback helps us improve! If you're stuck or confused, let us know and we'll help you out. All comments are public and must follow the Apollo Code of Conduct. Note that comments that have been resolved or addressed may be removed.

You'll need a GitHub account to post below. Don't have one? Post in our Odyssey forum instead.

              fields

              A unit of data that belongs to a type in a schema. Every GraphQL query requests one or more fields.

              type Author {
              # id, firstName, and lastName are all fields of the Author type
              id: Int!
              firstName: String
              lastName: String
              }
              router

              The single access point for a federated GraphQL architecture. It receives incoming operations and intelligently routes them across component services before returning a unified response.

              fields

              A unit of data that belongs to a type in a schema. Every GraphQL query requests one or more fields.

              type Author {
              # id, firstName, and lastName are all fields of the Author type
              id: Int!
              firstName: String
              lastName: String
              }
              query

              A request for specific data from a GraphQL server. Clients define the structure of the response, enabling precise and efficient data retrieval.

              directive

              A GraphQL annotation for a schema or operation that customizes request execution. Prefixed with @ and may include arguments. For example, the @lowerCase directive below can define logic to return the username field in lowercase:

              type User {
              username: String! @lowerCase
              }
              fields

              A unit of data that belongs to a type in a schema. Every GraphQL query requests one or more fields.

              type Author {
              # id, firstName, and lastName are all fields of the Author type
              id: Int!
              firstName: String
              lastName: String
              }
              query

              A request for specific data from a GraphQL server. Clients define the structure of the response, enabling precise and efficient data retrieval.

              field

              A unit of data that belongs to a type in a schema. Every GraphQL query requests one or more fields.

              type Author {
              # id, firstName, and lastName are all fields of the Author type
              id: Int!
              firstName: String
              lastName: String
              }
              field

              A unit of data that belongs to a type in a schema. Every GraphQL query requests one or more fields.

              type Author {
              # id, firstName, and lastName are all fields of the Author type
              id: Int!
              firstName: String
              lastName: String
              }
              field

              A unit of data that belongs to a type in a schema. Every GraphQL query requests one or more fields.

              type Author {
              # id, firstName, and lastName are all fields of the Author type
              id: Int!
              firstName: String
              lastName: String
              }
              entity type

              An object type in a federated graph that's defined as an entity.

              operation

              A single query, mutation, or subscription that clients send to a GraphQL server to request or manipulate data.

              fragment

              A selection set of fields that can be shared between multiple query operations. For example:

              fragment UserData on User {
              id: ID!
              firstName: String!
              lastName: String!
              }
              query GetUsers {
              allUsers {
              ...UserData
              }
              }
              query

              A request for specific data from a GraphQL server. Clients define the structure of the response, enabling precise and efficient data retrieval.

              query

              A request for specific data from a GraphQL server. Clients define the structure of the response, enabling precise and efficient data retrieval.

              field

              A unit of data that belongs to a type in a schema. Every GraphQL query requests one or more fields.

              type Author {
              # id, firstName, and lastName are all fields of the Author type
              id: Int!
              firstName: String
              lastName: String
              }
              query

              A request for specific data from a GraphQL server. Clients define the structure of the response, enabling precise and efficient data retrieval.

              NEW COURSE ALERT

              Introducing Apollo Connectors

              Connectors are the new and easy way to get started with GraphQL, using existing REST APIs.

              Say goodbye to GraphQL servers and resolvers—now, everything happens in the schema!

              Take the course