JavaScriptGraphQL_Apollo客户端配置详解-js教程-PHP中文网

JavaScriptGraphQL_Apollo客户端配置详解

狼影

发布： 2025-11-21 22:06:56

原创

822人浏览过

首先安装并配置 Apollo Client，创建 HTTP 链接；接着通过 setContext 添加认证请求头；然后使用 onError 处理错误；最后优化缓存策略，提升性能。

javascriptgraphql_apollo客户端配置详解

在现代前端开发中，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 认证令牌：

智慧车行预约小程序

智慧车行小程序，是一个专门为洗车/4S/车辆维修行业打造的小程序，前后端完整代码包括车行动态，养车常识，保养预约，维修预约，洗车美容预约，汽车检测预约等功能。采用腾讯提供的小程序云开发解决方案，无须服务器和域名预约管理：开始/截止时间/人数均可灵活设置，可以自定义客户预约填写的数据项预约凭证：支持线下到场后校验签到/核销/二维码自助签到等多种方式详尽的预约数据：支持预约名单数据导出Excel，打印

查看详情

import { ApolloClient, InMemoryCache, createHttpLink, split, HttpLink } from '@apollo/client'; import { setContext } from '@apollo/client/link/context'; const authLink = setContext((_, { headers }) => { const token = localStorage.getItem('authToken'); // 从本地存储获取 token return { headers: { ...headers, authorization: token ? `Bearer ${token}` : '', }, }; }); const httpLink = createHttpLink({ uri: 'https://your-graphql-api.com/graphql', }); const client = new ApolloClient({ link: authLink.concat(httpLink), cache: new InMemoryCache(), });

这里使用了 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 就能稳定高效地服务于你的应用。

以上就是JavaScriptGraphQL_Apollo客户端配置详解的详细内容，更多请关注php中文网其它相关文章！