5. Using $batch
2m

Overview

We know which endpoint we need and how the $batch works.

In this lesson, we will:

  • Learn how to configure the $batch in a Connector to map parameters
  • Use the Connectors Debugger to examine the results of batching

The listings batch endpoint

For our Airlock project, we'll use this batch endpoint: GET /listings?id=[id].

Let's give it a try. In the browser, paste in the following request: https://airlock-listings.demo-api.apollo.dev/listings/batch?id=listing-3&id=listing-2&id=listing-5

Here, we're asking for three different listings, with each listing id defined as a parameter.

The JSON object response gives us an array of listing objects, in the order we've listed in the request (listing-3, listing-2, listing-5).

https://airlock-listings.demo-api.apollo.dev/listings/batch?id=listing-3&id=listing-2&id=listing-5

JSON response of batch endpoint

It's exactly what we need! Time to use it in our schema.

Using $batch in the Connector

  1. First, we'll find the Listing type in our schema. Currently, we've configured the Connector to send a request to GET /listings/:id. We'll need to replace this with a request to our batch endpoint.

    type Listing
      @connect(
        source: "listings"
        http: { GET: "/listings/{$this.id}" }
        selection: """
        id
        title
        numOfBeds
        costPerNight
        description
        photoThumbnail
        latitude
        longitude
        """
      )
      @key(fields: "id") {
      id: ID!
      "The listing's title"
      title: String!
      "The number of beds available"
      numOfBeds: Int
      "The cost per night"
      costPerNight: Float
      "The listing's description"
      description: String
      "The thumbnail image for the listing"
      photoThumbnail: String
      "Latitude coordinates for the destination"
      latitude: Float
      "Longitude coordinates for the destination"
      longitude: Float
    }

  2. Let's start by removing the path parameter $this.id. In its place, we'll add on the batch path to match our batch endpoint.

    http: {
      GET: "/listings/batch",
    }

  3. Next, we'll fill in the parameter values using queryParams.

    http: {
      GET: "/listings/batch",
      queryParams: """
    

      """
    }

  4. Our endpoint needs parameters for id, referring to the listing's id . To define this mapping, we'll set the parameter name (id) to the value of $batch.id.

    http: {
      GET: "/listings/batch",
      queryParams: """
      id: $batch.id
      """
    }

    With this syntax, we've configured our Connector to make a call to GET /listings/batch, and the will take care of gathering up all those listing id before making one call to the batch endpoint using those values.

Checking our work

Let's save our changes and jump over to Sandbox.

We'll run the same as before:

query GetFeaturedListings {
  featuredListings {
    id
    title
    numOfBeds
    costPerNight
    description
    photoThumbnail
    latitude
    longitude
  }
}

Run the request, and we get the same data back. That's good—nothing should have changed in our data.

But let's look at the real magic behind the scenes! We'll navigate to the Connectors Debugger.

http://localhost:4000

Connectors Debugger in Sandbox

We only have two requests now: one to our first endpoint (GET /featured-listings), and another to our batched endpoint, which asks for details from multiple listings (GET /listings/batch?id=listing-1&id=listing-2&id=listing-3).

We've successfully solved our N+1 problem!

In the original approach without batching, the had to make N separate requests to our REST endpoint to retrieve data for each listing .

Requests original

With $batch, the recognizes that when it needs to retrieve data for one or more listing , it can make one request with all the ids.

Requests batched

Practice

What should we expect to see in the Connectors Debugger after implementing batching correctly?

Key takeaways

  • With $batch, the can group similar requests into one, reducing network calls and solving the N+1 problem.

Conclusion

And with that, we've done it—we've tackled the N+1 problem! With $batch in our Connectors toolbelt, we can boost our 's performance. We've taken a basic data-fetching strategy and made it into something that can scale with our queries and features.

Looking to do more with Connectors?

See you in the next one!

Share your questions and comments about this lesson

This course is currently in

beta
. 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.