Setting Up Apollo Client in React

Install @apollo/client and graphql. The graphql package is a peer dependency that Apollo Client requires for parsing query documents with the gql template tag.

For TypeScript projects, both packages ship their own type definitions, so no @types packages are needed.

Instantiate ApolloClient with a cache and a link. The simplest setup: new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' }). The uri shorthand creates an HttpLink internally.

For more control, build the link chain manually and pass it to the link option instead of uri.

Wrap your React application in ApolloProvider with the client prop: ApolloProvider client={client}. This makes the Apollo Client instance available to all descendant components via React context.

Every useQuery and useMutation call in the component tree automatically uses this client without any prop drilling.

InMemoryCache is Apollo Client's default cache. It normalizes fetched data by type and ID, storing each entity under a unique cache key (e.g., User:1). When any query fetches User:1, all subsequent reads of that entity receive the updated data.

This normalization means updating a user in one mutation automatically updates every query result that includes that user, without any additional code.

HttpLink handles the HTTP transport from Apollo Client to your GraphQL server. Configure it with uri and optionally fetch, headers, and credentials.

For advanced use cases, split links route different operations to different endpoints: subscriptions go over WebSocket (WebSocketLink), queries and mutations go over HTTP (HttpLink).

Import setContext from @apollo/client/link/context. Create an auth link: const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } })). Chain it before HttpLink: authLink.concat(httpLink).

The setContext link runs before each request, dynamically adding auth headers to every operation.

Compose links using ApolloLink.from([authLink, errorLink, httpLink]) or authLink.concat(httpLink). Links are middleware: each link processes the operation and passes it to next(). The last link in the chain sends the actual HTTP request.

Common chains: auth link (add headers) + error link (handle errors) + HTTP link (send request).

Import onError from @apollo/client/link/error. The error link intercepts GraphQL errors and network errors globally. Use it to redirect to a login page on UNAUTHENTICATED errors or display a global error toast on network failures.

The error link must appear before the HTTP link in the chain but can call forward(operation) to retry the request.

cache-first (default): return cached data immediately; refetch in background if stale. network-only: always fetch from server, update cache. cache-and-network: return cache immediately AND fetch, update UI when response arrives. cache-only: read from cache only, throw if not cached. no-cache: always fetch, never write to cache.

Choose based on data freshness requirements: dashboards often use cache-and-network; user profile forms use network-only.

Set the default fetchPolicy in the InMemoryCache defaultOptions: new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } }). Individual useQuery calls can override this per-query.

Setting a sensible global default reduces the boilerplate of specifying fetchPolicy on every hook call.

The Apollo Client DevTools browser extension adds an Apollo panel to Chrome DevTools. It shows all cached queries and their current data, lets you explore the normalized cache, and allows re-running queries from the DevTools panel.

Install from the Chrome Web Store and initialize the client with devtools: { enabled: true } (default in development mode).

In Apollo Client's link chain, where should the errorLink be placed relative to httpLink?

Install @apollo/client and graphql, create an ApolloClient with InMemoryCache and link chain, wrap the app in ApolloProvider. The link chain composes authLink (add tokens), errorLink (global error handling), and httpLink (HTTP transport). Fetch policy controls cache vs network priority; InMemoryCache normalizes entities by type+id.

Apollo DevTools browser extension makes cache inspection and debugging straightforward.