ConfigsApr 11, 2026·1 min read

Apollo Client — Industry-Leading GraphQL Client for TS/JS

Apollo Client is the industry-leading GraphQL client for TypeScript, JavaScript, React, Vue, Angular, and more. Powerful caching with normalized store, intuitive APIs, optimistic UI, subscriptions, and comprehensive developer tools.

AI
AI Open Source · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

npm i @apollo/client graphql
import { ApolloClient, InMemoryCache, ApolloProvider, gql, useQuery } from "@apollo/client";

const client = new ApolloClient({
  uri: "https://api.spacex.land/graphql",
  cache: new InMemoryCache(),
});

const GET_LAUNCHES = gql`
  query GetLaunches {
    launchesPast(limit: 5) {
      id
      mission_name
      launch_date_local
    }
  }
`;

function Launches() {
  const { loading, error, data } = useQuery(GET_LAUNCHES);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>{error.message}</p>;
  return <ul>{data.launchesPast.map((l: any) => <li key={l.id}>{l.mission_name}</li>)}</ul>;
}

function App() {
  return <ApolloProvider client={client}><Launches /></ApolloProvider>;
}
Intro

Apollo Client is the industry-leading GraphQL client for TypeScript and JavaScript. Used by thousands of production apps, it offers a comprehensive caching layer, optimistic UI, local state management, pagination helpers, and SSR support. Official bindings for React, Vue, Angular, and a framework-agnostic core.

What Apollo Client Does

  • Normalized cache — entities deduped by __typename:id
  • Query hooks — useQuery, useMutation, useSubscription, useLazyQuery, useFragment
  • Optimistic UI — local cache updates before server confirms
  • Pagination — fetchMore with offset or cursor-based
  • Local state — client-side schema and resolvers
  • SSR — server-rendered queries with hydration
  • Subscriptions — GraphQL subscriptions via WebSocket
  • Codegen — TypeScript types from schema

Architecture

Queries execute through a link chain (auth, error, retry, http). Responses are normalized into the InMemoryCache. Components subscribe to cache via hooks and re-render on cache changes. Mutations can update cache via refetchQueries, update(), or optimistic responses.

Self-Hosting

Client-only library.

Key Features

  • Normalized caching by __typename:id
  • Optimistic UI updates
  • Pagination helpers
  • Local state management
  • SSR support
  • WebSocket subscriptions
  • Apollo DevTools browser extension
  • Multi-framework (React, Vue, Angular)
  • TypeScript codegen integration

Comparison

Client Cache Type Safety Bundle Subscriptions
Apollo Client Normalized Codegen ~32KB Yes
URQL Document Codegen ~10KB Yes
Relay Normalized + compiler Compile-time ~20KB Yes
TanStack Query + gql Document Manual ~12KB Manual
SWR + gql Document Manual ~5KB Manual

常见问题 FAQ

Q: Apollo vs URQL？ A: Apollo 功能最全、缓存最智能，但 bundle 较大。URQL 更轻、API 更简，适合小型应用。

Q: 没有 GraphQL Server 能用吗？ A: 能。apollo-link-rest 可以把 REST 接口包装成 GraphQL；或者用 Apollo 客户端状态管理本地数据。

Q: 需要 codegen 吗？ A: 强烈建议。graphql-codegen 从 schema 和 operations 生成类型，杜绝运行时类型错误。

来源与致谢 Sources

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

Immer — Immutable State with Mutable Syntax

Immer lets you create the next immutable state by mutating the current one. Write mutating code as if it were normal JS and Immer produces a new immutable object via structural sharing. Built into Redux Toolkit and Zustand.

AI Open Source

date-fns — Modern Modular JavaScript Date Utility Library

date-fns is a modern JavaScript date utility library providing 200+ functions for parsing, formatting, arithmetic, and comparison. Tree-shakeable, immutable, TypeScript-first, and the modern alternative to Moment.js.

AI Open Source

Lodash — Modular Utility Library for JavaScript

Lodash is the most-downloaded utility library on npm. Modular helpers for arrays, objects, strings, collections, and functions — clone, debounce, throttle, merge, groupBy, and hundreds more battle-tested functions.

AI Open Source
◈Home🔍Search👤Me