Configs2026年4月11日·1 分钟阅读

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
快速使用

先拿来用，再决定要不要深挖

这里应该同时让用户和 Agent 知道第一步该复制什么、安装什么、落到哪里。

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>;
}
介绍

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

讨论

登录后参与讨论。
还没有评论，来写第一条吧。

相关资产

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
◈首页🔍搜索👤我的