Apollo Client

Overview

Apollo Client is a comprehensive state management library for JavaScript that allows developers to manage both local and remote data with GraphQL. It is specifically designed to integrate with modern frontend frameworks, with a strong emphasis on React applications. The client simplifies data fetching, caching, and modification, enabling developers to build data-driven user interfaces efficiently. It abstracts away the complexities of interacting with GraphQL APIs, providing a declarative approach to data management.

Developers use Apollo Client to fetch data from GraphQL endpoints, automatically cache it, and intelligently update their UI components when the underlying data changes. It supports features such as automatic re-fetching, optimistic UI updates, and real-time data synchronization through GraphQL subscriptions. This makes it suitable for applications that require dynamic data interactions and a responsive user experience. Its architecture is built around a normalized cache, which helps prevent redundant network requests and ensures data consistency across the application.

While primarily associated with React, Apollo Client can be used with other frameworks or in vanilla JavaScript environments, though its React integration offers the most streamlined developer experience. It is part of the larger Apollo platform, which includes Apollo Server for backend implementation and Apollo Studio for GraphQL development and operations. This ecosystem provides a cohesive set of tools for developing, deploying, and managing GraphQL applications end-to-end. The library is particularly well-suited for applications that interact with complex GraphQL schemas and require robust state management capabilities beyond basic data fetching.

Its declarative nature allows developers to define data requirements alongside their UI components, leading to more maintainable and understandable codebases. Apollo Client's tooling, including browser developer tools, further assists in debugging and monitoring GraphQL operations. The library's focus on developer experience is evident in its extensive documentation and active community support, which can help new users quickly adopt and leverage its features for their projects.

Key features

• Declarative Data Fetching: Define data requirements directly within UI components using GraphQL queries, simplifying data access and reducing boilerplate code (Apollo Client queries documentation).
• Normalized Cache: Automatically caches GraphQL query results in a normalized, in-memory store, reducing network requests and improving application performance (Apollo Client data fetching guide).
• Real-time Data with Subscriptions: Supports GraphQL subscriptions for real-time data synchronization, enabling live updates in applications without manual polling (GraphQL Subscriptions overview).
• Optimistic UI: Provides optimistic response updates, allowing the UI to react immediately to mutations before a server response is received, enhancing perceived performance (Apollo Client mutations documentation).
• Local State Management: Offers tools to manage local application state alongside remote data, providing a unified state management solution (Apollo Client local state management).
• Pagination and Infinite Scrolling: Built-in utilities and patterns for handling paginated data and implementing infinite scrolling experiences (Apollo Client pagination guide).
• Error Handling: Robust mechanisms for handling errors from GraphQL operations, allowing for custom error displays and recovery strategies (Apollo Client error handling).
• TypeScript Support: Fully typed codebase and excellent TypeScript integration, providing type safety and improved developer experience for TypeScript projects (Apollo Client static typing with TypeScript).

Pricing

Apollo Client is open-source and free to use. The pricing below applies to Apollo Studio, which offers tools for GraphQL development and operations. Pricing accurate as of May 7, 2026.

For detailed and up-to-date pricing information, refer to the Apollo GraphQL pricing page.

Common integrations

• React: Primary integration, providing hooks and components for seamless data management in React applications (Apollo Client React documentation).
• Next.js: Integrates with Next.js for server-side rendering (SSR), static site generation (SSG), and incremental static regeneration (ISR) with GraphQL data (Apollo Client Next.js integration guide).
• Express.js: Can be used with Express.js on the backend for building GraphQL servers that Apollo Client can query (Apollo Server with Express guide).
• TypeScript: Full support for TypeScript, offering type safety and enhanced developer experience in TypeScript projects (Apollo Client TypeScript setup).
• Jest: Integrates with Jest for testing GraphQL operations and client-side logic in React components (Apollo Client testing with Jest).

Alternatives

• Relay: A JavaScript framework for building data-driven React applications, developed by Meta, offering strong type safety and performance optimizations.
• urql: A lightweight, extensible GraphQL client for React, Preact, and Svelte, focusing on simplicity and modularity.
• SWR: A React Hooks library for data fetching, developed by Vercel, which focuses on client-side caching and revalidation based on stale-while-revalidate strategy.

Getting started

To get started with Apollo Client in a React application, you typically install the necessary packages and set up an ApolloProvider to wrap your application. This provider makes the Apollo Client instance available to all components within its tree.

First, install the required packages:

npm install @apollo/client graphql
# or
yarn add @apollo/client graphql

Next, create an Apollo Client instance and wrap your React application with the ApolloProvider:

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

const client = new ApolloClient({
  uri: 'https://snowtooth.moonhighway.com/', // Example GraphQL API endpoint
  cache: new InMemoryCache(),
});

function App() {
  return (
    <div>
      <h2>My first Apollo app &#128640;</h2>
      <ExchangeRates />
    </div>
  );
}

function ExchangeRates() {
  const { loading, error, data } = client.useQuery(gql`
    query GetExchangeRates {
      exchangeRates {
        currency
        rate
      }
    }
  `);

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

  return (
    <div>
      {data.exchangeRates.map(({ currency, rate }) => (
        <div key={currency}>
          <p>{currency}: {rate}</p>
        </div>
      ))}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

In this example, ApolloClient is initialized with a GraphQL endpoint and an InMemoryCache. The ApolloProvider then makes this client instance available to the App component and its children. The ExchangeRates component demonstrates how to use the useQuery hook to fetch data. The useQuery hook, from React, observes the loading state, any errors, and the fetched data, updating the UI as these states change.

For more detailed setup instructions and advanced configurations, refer to the Apollo Client Getting Started guide.