7. Follow-along: Using `@defer`

Follow-along: Using @defer

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

The has this built-in capability to handle in a that resolve more slowly than the rest. Using the @defer , we can specify which to defer—meaning that our 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 needs to meet one of the following requirements:

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

    query GetRecipePage {
    recipe(id: "recOZrH0RhjSjATBp") {
    ingredients {
    recentlyAddedRecipes {

    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 "

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

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


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.