How to Optimize Apollo Client in React

Optimizing Apollo Client in React is essential for building fast, responsive, and data-efficient web applications. This article provides a straightforward guide on how to improve your app’s performance by leveraging Apollo Client’s built-in caching, fine-tuning fetch policies, minimizing unnecessary re-renders, and implementing advanced query strategies like request batching and local state management.

1. Configure Fetch Policies Wisely

Apollo Client’s fetch policies determine whether a query resolves from the local cache or makes a network request. Selecting the appropriate policy prevents redundant network traffic.

• cache-first (Default): Best for static or rarely changing data. It reads from the cache first and only makes a network request if the data is missing.
• cache-and-network: Good for dynamic data that needs to load quickly. It returns cached data immediately while fetching the latest data in the background to update the UI.
• network-only: Use this for highly volatile data (like bank balances) where cached data should never be shown.
• cache-only: Ideal for offline-first scenarios or when you are certain the data already exists in the cache.

const { data, loading } = useQuery(GET_USER_PROFILE, {
  fetchPolicy: 'cache-and-network',
  nextFetchPolicy: 'cache-first', // Cache subsequent executions
});

2. Utilize Field Policies and Pagination

For large datasets, fetching all items at once degrades performance. Use field policies to handle pagination and merge incoming data seamlessly in the cache.

Instead of manually managing page states in your React components, define a merge function inside your InMemoryCache configuration:

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        feed: {
          keyArgs: false, // Prevents cache separation by arguments
          merge(existing = [], incoming) {
            return [...existing, ...incoming];
          },
        },
      },
    },
  },
});

3. Enable HTTP Query Batching

By default, Apollo Client sends a separate HTTP request for every active query on a page. If a dashboard triggers five queries at once, it results in five round-trips to the server.

You can batch these into a single HTTP request using BatchHttpLink.

import { BatchHttpLink } from "@apollo/client/link/batch-http";

const link = new BatchHttpLink({
  uri: "/graphql",
  batchMax: 10, // Max queries to batch together
  batchInterval: 10, // Wait 10ms for other queries before sending
});

4. Colocate Fragments to Prevent Over-Fetching

Avoid requesting fields that your components do not use. Implement fragment colocation by defining GraphQL fragments directly alongside the UI components that render them.

This ensures that parent components only fetch the exact fields required by their child components, reducing the payload size.

// UserAvatar.js
UserAvatar.fragments = {
  user: gq`
    fragment UserAvatarFragment on User {
      id
      avatarUrl
    }
  `,
};

5. Prevent Unnecessary Re-renders

React components using useQuery re-render whenever the query state changes (e.g., from loading to data). You can optimize this behavior using specific hook options:

• skip: Use the skip option to prevent a query from running until its variables are fully resolved.
• notifyOnNetworkStatusChange: Set this to false (default) unless you explicitly need to track refetching states, as setting it to true causes extra re-renders during background updates.

const { data } = useQuery(GET_DETAILS, {
  skip: !userId, // Do not fetch if userId is undefined
});

6. Store Local State with Reactive Variables

Instead of introducing heavy state management libraries like Redux or using React Context (which can cause widespread re-renders), use Apollo Client’s Reactive Variables to manage local UI state.

Reactive variables bypass the Apollo cache but still trigger updates in components that use the useReactiveVar hook.

import { makeVar, useReactiveVar } from '@apollo/client';

export const darkModeVar = makeVar(false);

// Inside your React component:
const isDarkMode = useReactiveVar(darkModeVar);