首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

基于上下文的多个ApolloLink

基础概念

Apollo Client 是一个强大的 GraphQL 客户端,用于 JavaScript 应用程序。它通过使用 Apollo Link 来处理请求的各个阶段,从而提供了灵活的中间件机制。Apollo Link 是一个用于连接 Apollo Client 和 GraphQL 服务器的链式结构,允许你在请求发送到服务器之前或响应返回到客户端之前对其进行修改或增强。

相关优势

  1. 灵活性:Apollo Link 允许开发者插入自定义逻辑,例如日志记录、错误处理、认证等。
  2. 模块化:每个 Link 都是独立的,可以单独测试和复用。
  3. 可组合性:多个 Links 可以串联起来,形成一个处理链,每个 Link 负责不同的任务。

类型

  1. HttpLink:用于将 GraphQL 请求发送到 HTTP 服务器。
  2. InMemoryCacheLink:用于管理客户端的缓存。
  3. AuthLink:用于在请求头中添加认证信息。
  4. ErrorLink:用于捕获和处理错误。
  5. BatchHttpLink:用于批量发送 GraphQL 请求,提高性能。

应用场景

假设你有一个需要认证的 GraphQL API,并且希望在请求发送之前添加认证头,同时在响应返回时进行错误处理。你可以使用 AuthLinkErrorLink 来实现这一需求。

示例代码

代码语言:txt
复制
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
import { onError } from '@apollo/client/link/error';

// 创建一个用于添加认证头的 Link
const authLink = setContext((_, { headers }) => {
  // 获取认证令牌
  const token = localStorage.getItem('token');
  // 返回修改后的请求头
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});

// 创建一个用于错误处理的 Link
const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.forEach(({ message, locations, path }) =>
      console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`)
    );
  if (networkError) console.log(`[Network error]: ${networkError}`);
});

// 创建 HttpLink
const httpLink = new HttpLink({ uri: 'https://api.example.com/graphql' });

// 创建 Apollo Client 实例
const client = new ApolloClient({
  link: authLink.concat(errorLink).concat(httpLink),
  cache: new InMemoryCache()
});

export default client;

参考链接

通过上述代码,你可以看到如何使用多个 Apollo Link 来处理认证和错误。每个 Link 负责不同的任务,通过 concat 方法将它们串联起来,形成一个完整的请求处理链。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券