{"id":11646,"library":"react-apollo","title":"React Apollo Integration (Deprecated)","description":"React Apollo (package `react-apollo`) provided the official React integration for Apollo Client, enabling developers to fetch and manage GraphQL data in React applications using Hooks, Components, and Higher-Order Components (HOCs). Version 3.1.5, released on April 14, 2020, was a stable release within the v3 series. The project has since been officially deprecated, with version 4.0.0 (released July 20, 2020) being its final release. All core React Apollo functionality, including hooks, components, HOCs, SSR, and testing utilities, has been migrated directly into the `@apollo/client` package (v3 and above). Developers are strongly advised to migrate to `@apollo/client` for active maintenance, new features, and bug fixes, as `react-apollo` no longer receives updates or support.","status":"deprecated","version":"3.1.5","language":"javascript","source_language":"en","source_url":"https://github.com/apollographql/react-apollo","tags":["javascript","apollo","graphql","react","hooks","hoc","components","typescript"],"install":[{"cmd":"npm install react-apollo","lang":"bash","label":"npm"},{"cmd":"yarn add react-apollo","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-apollo","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"TypeScript type definitions for React components.","package":"@types/react","optional":true},{"reason":"Core GraphQL client for data fetching, caching, and state management.","package":"apollo-client","optional":false},{"reason":"GraphQL language utilities and schema definitions.","package":"graphql","optional":false},{"reason":"Required for building React components and utilizing hooks.","package":"react","optional":false},{"reason":"Provides DOM-specific methods for React applications.","package":"react-dom","optional":false}],"imports":[{"note":"Required to provide an ApolloClient instance to the React component tree. Since Apollo Client 3+, this should be imported from `@apollo/client/react`.","wrong":"const ApolloProvider = require('react-apollo').ApolloProvider;","symbol":"ApolloProvider","correct":"import { ApolloProvider } from 'react-apollo';"},{"note":"A React component for declarative data fetching. For Apollo Client 3+, this is available from `@apollo/client/react/components`.","wrong":"import Query from 'react-apollo/Query';","symbol":"Query","correct":"import { Query } from 'react-apollo';"},{"note":"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.","wrong":"import { useQuery } from '@apollo/react-hooks';","symbol":"useQuery","correct":"import { useQuery } from 'react-apollo';"},{"note":"The higher-order component (HOC) for injecting GraphQL data into components. For Apollo Client 3+, this is available from `@apollo/client/react/hoc`.","wrong":"import graphql from 'react-apollo/lib/graphql';","symbol":"graphql","correct":"import { graphql } from 'react-apollo';"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { ApolloClient, InMemoryCache, HttpLink } from 'apollo-client';\nimport { ApolloProvider, useQuery, gql } from 'react-apollo';\n\n// Create an Apollo Client instance\nconst client = new ApolloClient({\n link: new HttpLink({\n uri: 'https://graphqlzero.almansi.me/api',\n }),\n cache: new InMemoryCache(),\n});\n\n// Define your GraphQL query\nconst GET_TODOS = gql`\n query GetTodos {\n todos(options: { limit: 5 }) {\n data {\n id\n title\n completed\n }\n }\n }\n`;\n\n// A React component that uses the useQuery hook\nfunction Todos() {\n const { loading, error, data } = useQuery(GET_TODOS);\n\n if (loading) return
\n );\n}\n\n// Render the application wrapped in ApolloProvider\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);\n","lang":"typescript","description":"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."},"warnings":[{"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`).","message":"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.","severity":"breaking","affected_versions":">=4.0.0"},{"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`.","message":"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`.","severity":"breaking","affected_versions":">=3.0.0 <4.0.0"},{"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.","message":"A breaking change was introduced in `useLazyQuery` in versions 3.1.5, potentially altering its behavior or API.","severity":"breaking","affected_versions":"3.1.5"},{"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`).","message":"Versions 3.1.4 and 3.1.5 were reported to break `addMocksToSchema` functionality from `@graphql-tools/mock` when used with `MockedProvider`.","severity":"gotcha","affected_versions":"3.1.4, 3.1.5"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.5.3"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure your application's root component (or the highest common ancestor of your GraphQL components) is wrapped in `...`.","cause":"The ApolloClient instance was not provided to the React context, usually because the root component is not wrapped with `` or the client prop is missing.","error":"Error: Could not find \"client\" in the context of ApolloConsumer. Wrap the root component in an ."},{"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`.","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.","error":"TypeError: Cannot destructure property 'data' of 'undefined' or 'null'."},{"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.","cause":"The client could not connect to the GraphQL server, often due to an incorrect URI, network issues, or CORS policy blocks.","error":"GraphQL error: Network error: Failed to fetch"},{"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.","cause":"A GraphQL operation (query, mutation, subscription) completes after the component that initiated it has unmounted, leading to state updates on an unmounted component.","error":"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."},{"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.","cause":"Specific breaking changes in `useLazyQuery` were reported for `react-apollo` 3.1.5, causing unexpected behavior or errors.","error":"Unhandled Rejection (Error): A breaking change in 3.1.5 affects useLazyQuery"}],"ecosystem":"npm"}