Building a frontend storefront or dashboard that communicates with multiple backend GraphQL services can quickly lead to network bottlenecks. If each page component triggers its own network request, mobile load speeds will suffer. Query Batching combines multiple requests into a single HTTP payload.

By leveraging Next.js Server-Side Rendering (SSR) along with Apollo Client, you can aggregate queries and serve pre-rendered pages instantly.

1. Configuring Apollo Client with Batching

In our Next.js frontend (web-ui-client), we enable query batching by replacing the standard Apollo Link with BatchHttpLink. This automatically debounces and groups multiple GraphQL queries into a single HTTP POST request:

// Apollo Client setup with query batching in TypeScript
import { ApolloClient, InMemoryCache } from "@apollo/client";
import { BatchHttpLink } from "@apollo/client/link/batch-http";

const batchLink = new BatchHttpLink({
  uri: "http://api.the enterprise platform.com/graphql",
  batchInterval: 10, // Group queries sent within 10ms
  batchMax: 5 // Maximum 5 queries per HTTP payload
});

export const client = new ApolloClient({
  link: batchLink,
  cache: new InMemoryCache()
});

2. Server-Side Rendering (SSR) Caching

For content-heavy pages, we call Apollo queries inside Next.js's getServerSideProps. The page is pre-rendered on the server node, injecting the populated Apollo cache as props. The client-side hydrator then loads the page immediately without triggering database sweeps.