在 React 中配置 Apollo Client

安装 @apollo/client 和 graphql。graphql 包是 Apollo Client 所需的对等依赖，用于通过 gql 模板标签解析查询文档。

对于 TypeScript 项目，这两个包都自带类型定义，因此不需要 @types 包。

使用缓存和链接实例化 ApolloClient。最简单的设置是：new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' })。uri 简写形式会在内部创建一个 HttpLink。

如需更多控制，请手动构建链接链，并将其传给 link 选项，而不是 uri。

使用 client 属性将 React 应用包装在 ApolloProvider 中：ApolloProvider client={client}。这样，所有后代组件都可以通过 React 上下文访问 Apollo Client 实例。

组件树中的每个 useQuery 和 useMutation 调用都会自动使用此客户端，无需逐层传递属性。

InMemoryCache 是 Apollo Client 的默认缓存。它会按类型和 ID 对获取的数据进行规范化，并将每个实体存储在唯一的缓存键下（例如 User:1）。任何查询获取 User:1 后，之后对该实体的所有读取都会得到更新后的数据。

这种规范化意味着，在一次变更中更新用户后，所有包含该用户的查询结果都会自动更新，无需编写额外代码。

HttpLink 负责 Apollo Client 与 GraphQL 服务器之间的 HTTP 传输。您可以配置 uri，也可以选择配置 fetch、headers 和 credentials。

对于高级用例，可以使用拆分链接将不同操作路由到不同端点：订阅通过 WebSocket（WebSocketLink）传输，查询和变更通过 HTTP（HttpLink）传输。

从 @apollo/client/link/context 导入 setContext。创建身份验证链接：const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } }))。将其串联在 HttpLink 之前：authLink.concat(httpLink)。

setContext 链接会在每次请求前运行，动态地为每个操作添加身份验证标头。

可以使用 ApolloLink.from([authLink, errorLink, httpLink]) 或 authLink.concat(httpLink) 组合链接。链接充当中间件：每个链接都会处理操作，并将其传给 next()。链中的最后一个链接发送实际的 HTTP 请求。

常见的链是：身份验证链接（添加标头）+ 错误链接（处理错误）+ HTTP 链接（发送请求）。

从 @apollo/client/link/error 导入 onError。错误链接会全局拦截 GraphQL 错误和网络错误。您可以使用它在出现 UNAUTHENTICATED 错误时重定向到登录页，或在网络失败时显示全局错误提示。

错误链接必须位于链中的 HTTP 链接之前，但可以调用 forward(operation) 重试请求。

cache-first（默认）：立即返回缓存数据；如果数据过时，则在后台重新获取。network-only：始终从服务器获取，并更新缓存。cache-and-network：立即返回缓存，同时发起获取；响应到达后更新界面。cache-only：仅从缓存读取，如果未缓存则抛出错误。no-cache：始终获取数据，从不写入缓存。

请根据数据新鲜度需求进行选择：仪表板通常使用 cache-and-network；用户资料表单使用 network-only。

在 InMemoryCache 的 defaultOptions 中设置默认 fetchPolicy：new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } })。单个 useQuery 调用可以按查询覆盖此设置。

设置合理的全局默认值，可以减少在每次钩子调用中指定 fetchPolicy 的样板代码。

Apollo Client DevTools 浏览器扩展会在 Chrome DevTools 中添加一个 Apollo 面板。它会显示所有已缓存的查询及其当前数据，支持探索规范化缓存，也允许从 DevTools 面板重新运行查询。

请从 Chrome 网上应用店安装，并使用 devtools: { enabled: true } 初始化客户端（开发模式下默认启用）。

在 Apollo Client 的链接链中，errorLink 应该放在 httpLink 的什么位置？

安装 @apollo/client 和 graphql，使用 InMemoryCache 和链接链创建 ApolloClient，并将应用包装在 ApolloProvider 中。链接链由 authLink（添加令牌）、errorLink（全局处理错误）和 httpLink（HTTP 传输）组合而成。获取策略控制缓存与网络的优先级；InMemoryCache 按类型和 ID 对实体进行规范化。

Apollo DevTools 浏览器扩展让缓存检查和调试变得简单直接。