Batching multiple GraphQL queries in one HTTP request

Multiple independent GraphQL queries on page load each initiate a separate HTTP round-trip. In mobile or high-latency environments this multiplies load time.

Enable query batching on both client and server to coalesce multiple operations into one HTTP POST.

// Apollo Client — batch HTTP link
import { BatchHttpLink } from '@apollo/client/link/batch-http';

const client = new ApolloClient({
  link: new BatchHttpLink({
    uri: '/graphql',
    batchMax: 5,       // max operations per batch
    batchInterval: 20, // ms to wait for more operations
  }),
});

// Apollo Server — batching is supported natively (array body)
// No extra config needed — it accepts [ {query}, {query} ] bodies

Batching sends [op1, op2, op3] as a single HTTP request. The server processes each and returns [result1, result2, result3]. One round-trip instead of three significantly reduces perceived latency.

Pages with multiple independent GraphQL queries that run on mount