Apollo Client：前端 GraphQL 数据请求的标准答案

Apollo Client 是目前使用最广泛的 GraphQL 客户端库，GitHub 上接近 2 万 Star。

它支持 TypeScript、JavaScript，也能在 React、Vue、Angular、Svelte 等框架中使用。

GraphQL 这几年在前端数据请求领域用得越来越多，它允许客户端精确指定需要的字段，不用像 REST 那样一次拉一堆用不上的数据。

Apollo Client 在这件事上做了几件关键的事。

零配置缓存

Apollo Client 内置了 InMemoryCache，查询结果会自动去重和规范化存储。同一份数据不管被几个组件引用，内存里只存一份，组件拿到的始终是最新的。

缓存更新也做了自动化处理。写操作（mutation）执行后，相关查询会自动重新获取，不用手动管理数据刷新。

TypeScript 支持

从 3.0 版本开始全面拥抱 TypeScript，查询结果有完整的类型推导。写查询的时候 IDE 能直接给出字段提示，改了 schema 也能及时发现类型不匹配的问题。

安装和基本用法

安装只需要两行命令：

npm install @apollo/client graphql

然后在代码里初始化客户端：

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
});

发起查询用 useQuery hook：

import { useQuery, gql } from '@apollo/client';

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

function UserList() {
  const { loading, error, data } = useQuery(GET_USERS);
  if (loading) return <p>加载中...</p>;
  return data.users.map(user => <div key={user.id}>{user.name}</div>);
}

useQuery 会自动处理加载状态、错误和缓存，组件不需要自己写 loading 逻辑。

框架支持

Apollo Client 跟各主流前端框架都有专门的集成方案。React 这边已经支持了 React 19 的 Suspense、Server Components 和 Compiler。Vue、Angular、Svelte 同样有对应的封装库。

调试工具

Apollo 提供了浏览器开发者工具插件，Chrome 和 Firefox 都能装。装上之后可以在浏览器里直接查看当前执行了哪些 GraphQL 查询、缓存里存了什么数据、网络请求的耗时和返回内容。

团队维护

项目由 Apollo 团队维护，定期更新路线图，社区活跃度也不错。采用 MIT 协议开源。

对于需要在前端做数据请求管理的团队来说，Apollo Client 是一个比较省心的选择。缓存、类型、调试工具这些基础能力都内置了，不用自己造轮子。

源。

对于需要在前端做数据请求管理的团队来说，Apollo Client 是一个比较省心的选择。缓存、类型、调试工具这些基础能力都内置了，不用自己造轮子。