React Apollo Integration (Deprecated)

Common errors

• Error: Could not find "client" in the context of ApolloConsumer. Wrap the root component in an <ApolloProvider>.

  cause The ApolloClient instance was not provided to the React context, usually because the root component is not wrapped with `<ApolloProvider />` or the client prop is missing.
  fix Ensure your application's root component (or the highest common ancestor of your GraphQL components) is wrapped in `<ApolloProvider client={yourApolloClientInstance}>...</ApolloProvider>`.

• TypeError: Cannot destructure property 'data' of 'undefined' or 'null'.

  cause This often happens when `useQuery` returns `undefined` for `data` (or `loading`/`error` properties) before the query has completed or if `useQuery` itself is returning `undefined` as reported in issue #4042 for v3.x.
  fix Always check for `loading` and `error` states before trying to access `data`. For specific issues like #4042, consider upgrading or downgrading `react-apollo` to a working version or, preferably, migrating to `@apollo/client`.

• GraphQL error: Network error: Failed to fetch

  cause The client could not connect to the GraphQL server, often due to an incorrect URI, network issues, or CORS policy blocks.
  fix Verify the `uri` in your `HttpLink` configuration is correct and accessible. Check browser console for CORS errors. Ensure your GraphQL server is running and reachable.

• Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.

  cause A GraphQL operation (query, mutation, subscription) completes after the component that initiated it has unmounted, leading to state updates on an unmounted component.
  fix Use a ref to track component mounted status or implement cleanup logic (e.g., in `useEffect` for hooks, `componentWillUnmount` for classes) to cancel pending operations or prevent state updates if the component is unmounted.

• Unhandled Rejection (Error): A breaking change in 3.1.5 affects useLazyQuery

  cause Specific breaking changes in `useLazyQuery` were reported for `react-apollo` 3.1.5, causing unexpected behavior or errors.
  fix Review the usage of `useLazyQuery` in your application. Consult GitHub issues (e.g., #4040) for details on the breaking change. Consider pinning to an earlier `react-apollo` 3.x version or migrating to `@apollo/client` which provides its own `useLazyQuery` hook.

Warnings

• breaking The `react-apollo` package is officially deprecated and archived. Version 4.0.0 was the final release. All future development, bug fixes, and features are integrated directly into the `@apollo/client` package (version 3 and above). Continuing to use `react-apollo` means using an unsupported library.
  Fix: Migrate your application to `@apollo/client`. Refer to the Apollo Client migration guide for detailed instructions. This involves updating imports from `react-apollo` or `@apollo/react-hooks` to `@apollo/client` and its subpaths (e.g., `@apollo/client/react/components`, `@apollo/client/react/hoc`).
• breaking Version 3.0.0 introduced significant breaking changes, including a minimum React version requirement of 16.8. The `react-apollo` package primarily re-exports functionality from `@apollo/react-hooks`, `@apollo/react-components`, and `@apollo/react-hoc`. Testing utilities were moved to `@apollo/react-testing`.
  Fix: Ensure your React version is 16.8 or newer. For components and hooks, consider direct imports from the `@apollo/react-X` packages or, preferably, migrate to `@apollo/client` directly. Update testing utility imports to `@apollo/react-testing`.
• breaking A breaking change was introduced in `useLazyQuery` in versions 3.1.5, potentially altering its behavior or API.
  Fix: Review your `useLazyQuery` implementations when upgrading to 3.1.5. Consult the GitHub issues (#4040) for specific changes and potential workarounds, or migrate to `@apollo/client` which has its own `useLazyQuery` implementation.
• gotcha Versions 3.1.4 and 3.1.5 were reported to break `addMocksToSchema` functionality from `@graphql-tools/mock` when used with `MockedProvider`.
  Fix: If experiencing issues with `MockedProvider` and `@graphql-tools/mock`, consider downgrading `react-apollo` to an earlier 3.x version (e.g., 3.1.3) or migrating your testing setup entirely to `@apollo/client` and its testing utilities (`@apollo/client/testing`).
• gotcha Using `setState` within the `onError` or `onCompleted` callbacks of the `Query` component (and potentially `useQuery` hook) could lead to infinite loops in earlier versions (2.5.3). This pattern can still be problematic if not carefully managed.
  Fix: Ensure `setState` calls in `onCompleted` or `onError` are guarded to prevent re-renders that re-trigger the query/mutation. For example, check if `data` or `error` has changed before updating state, or use a ref to track if a side effect has already been performed.

Install

• npm install react-apollo npm
• yarn add react-apollo yarn
• pnpm add react-apollo pnpm

Imports

• ApolloProvider
  wrong:

  const ApolloProvider = require('react-apollo').ApolloProvider;

  correct:

  import { ApolloProvider } from 'react-apollo';

  Required to provide an ApolloClient instance to the React component tree. Since Apollo Client 3+, this should be imported from `@apollo/client/react`.
• Query
  wrong:

  import Query from 'react-apollo/Query';

  correct:

  import { Query } from 'react-apollo';

  A React component for declarative data fetching. For Apollo Client 3+, this is available from `@apollo/client/react/components`.
• useQuery
  wrong:

  import { useQuery } from '@apollo/react-hooks';

  correct:

  import { useQuery } from 'react-apollo';

  A React hook for executing GraphQL queries. This functionality is now directly available from `@apollo/client` since Apollo Client 3.x. The separate `@apollo/react-hooks` package is also deprecated.
• graphql
  wrong:

  import graphql from 'react-apollo/lib/graphql';

  correct:

  import { graphql } from 'react-apollo';

  The higher-order component (HOC) for injecting GraphQL data into components. For Apollo Client 3+, this is available from `@apollo/client/react/hoc`.

Quickstart

This quickstart demonstrates how to set up `react-apollo` with `ApolloClient`, define a GraphQL query using `gql`, and fetch data in a React component using the `useQuery` hook. It renders a list of todos from a public API.

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloClient, InMemoryCache, HttpLink } from 'apollo-client';
import { ApolloProvider, useQuery, gql } from 'react-apollo';

// Create an Apollo Client instance
const client = new ApolloClient({
  link: new HttpLink({
    uri: 'https://graphqlzero.almansi.me/api',
  }),
  cache: new InMemoryCache(),
});

// Define your GraphQL query
const GET_TODOS = gql`
  query GetTodos {
    todos(options: { limit: 5 }) {
      data {
        id
        title
        completed
      }
    }
  }
`;

// A React component that uses the useQuery hook
function Todos() {
  const { loading, error, data } = useQuery(GET_TODOS);

  if (loading) return <p>Loading todos...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h2>My Todos (via react-apollo)</h2>
      <ul>
        {data.todos.data.map(({ id, title, completed }) => (
          <li key={id} style={{ textDecoration: completed ? 'line-through' : 'none' }}>
            {title}
          </li>
        ))}
      </ul>
    </div>
  );
}

// Render the application wrapped in ApolloProvider
ReactDOM.render(
  <ApolloProvider client={client}>
    <Todos />
  </ApolloProvider>,
  document.getElementById('root')
);