首先安装并配置 Apollo Client，创建 HTTP 链接；接着通过 setContext 添加认证请求头；然后使用 onError 处理错误；最后优化缓存策略，提升性能。
在现代前端开发中，GraphQL 已成为替代传统 REST API 的主流选择。而 Apollo Client 是目前最流行的 GraphQL 客户端之一，它提供了强大的缓存机制、类型安全支持以及与 React 等框架的无缝集成。本文将详细讲解如何配置 Apollo Client 以连接到 GraphQL 服务，并涵盖常用功能如请求头设置、错误处理、缓存策略等。
1. 安装与基础配置
使用 Apollo Client 前，需要安装核心包和必要的依赖：
npm install @apollo/client graphql安装完成后，创建一个 ApolloClient 实例并配置基本的 HTTP 链接：
示例代码：
立即学习“Java免费学习笔记（深入）”；
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client'; const httpLink = createHttpLink({ uri: 'https://your-graphql-api.com/graphql', // 替换为你的 GraphQL 接口地址 }); const client = new ApolloClient({ link: httpLink, cache: new InMemoryCache(), });InMemoryCache 是 Apollo 提供的默认缓存系统，能自动缓存查询结果，提升性能并减少重复请求。
2. 设置请求头（如认证 Token）
大多数生产环境的 GraphQL 接口都需要身份验证。可以通过 setContext 添加中间件来动态设置请求头。
常见做法是携带 JWT 认证令牌：
乐彼多用户商城系统，采用ASP.NET分层技术和AJAX技术，运营于高速稳定的微软.NET+MSSQL 2005平台；完全具备搭建超大型网络购物多用户网上商城的整体技术框架和应用层次LBMall 秉承乐彼软件优秀品质，后台人性化设计，管理窗口识别客户端分辨率自动调整，独立配置的菜单操作锁，使管理操作简单便捷。待办事项1、新订单、支付、付款、短信提醒2、每5分钟自动读取3、新事项声音提醒 店铺管理1
这里使用了 concat 方法将认证链接与 HTTP 链接组合，确保每次请求都带上授权头。
3. 错误处理（Error Link）
当 GraphQL 请求发生网络错误或服务端返回异常时，应进行统一处理，例如登出用户或提示错误信息。
import { onError } from '@apollo/client/link/error'; const errorLink = onError(({ graphQLErrors, networkError }) => { if (graphQLErrors) { graphQLErrors.forEach(({ message, locations, path }) => { console.error(`[GraphQL Error] Message: ${message}, Path: ${path}`); if (message.includes('invalid token') || message.includes('unauthorized')) { // 可在此清除 token 并跳转登录页 localStorage.removeItem('authToken'); window.location.href = '/login'; } }); } if (networkError) { console.error(`[Network Error]`, networkError); } }); // 组合多个链接：错误处理 -> 认证 -> HTTP 请求 const client = new ApolloClient({ link: errorLink.concat(authLink).concat(httpLink), cache: new InMemoryCache(), });注意链接顺序很重要，一般按执行顺序排列：先 errorLink，再 authLink，最后 httpLink。
4. 缓存配置优化
Apollo Client 的缓存不仅能提升性能，还能实现离线体验。你可以自定义缓存行为，比如为特定类型设置唯一键。
例如，如果你的 schema 中有 User 类型，可以指定其通过 id 字段作为标识：
const cache = new InMemoryCache({ typePolicies: { User: { keyFields: ['id'], // 使用 id 作为唯一标识 }, Post: { keyFields: ['slug'], // 某些类型可能用 slug 作为主键 }, }, });对于不希望被缓存的查询，可以在调用 useQuery 时设置 fetchPolicy: 'no-cache' 或 'network-only'。
基本上就这些核心配置。合理组合链接、正确设置认证与错误处理，再辅以合适的缓存策略，Apollo Client 就能稳定高效地服务于你的应用。
