Apollo Client 中自定义 ApolloLink 导致重复请求问题解析

问题背景

在使用 Apollo Client 进行 GraphQL 开发时，开发者经常会通过创建自定义的 ApolloLink 来实现特定的功能需求。然而，在从 Apollo Client 3.7.14 升级到 3.10.4 版本后，一些开发者发现他们的自定义链接出现了重复请求的问题。

问题重现

当开发者创建一个自定义的 ApolloLink 并在其中直接订阅 observable 时，例如以下代码：

export class MyLink extends ApolloLink {
  constructor() {
    super((operation, forward) => {
      const next: Observable<FetchResult> = forward(operation);

      next.subscribe({
        error: (e) => {
          console.log(e);
        },
        next: (result) => {
          console.log(result);
        },
      });

      return next;
    });
  }
}

这种情况下，每个 GraphQL 请求都会被发送两次，这显然不是开发者期望的行为。

问题根源

这个问题的本质在于对 Observable 工作原理的理解不足。在 Apollo Client 中，HttpLink 的实现会在 observable 被订阅时执行 fetch 请求。当开发者在自定义链接中直接订阅 observable 并返回同一个 observable 时，实际上创建了两个订阅：

1. 自定义链接中的显式订阅
2. Apollo Client 核心自身的订阅

每个订阅都会触发一次网络请求，因此导致了重复请求的问题。

解决方案

方案一：使用 map 操作符

export class MyLink extends ApolloLink {
  constructor() {
    super((operation, forward) => {
      return forward(operation).map((result) => {
        console.log(result);
        return result;
      });
    });
  }
}

这种方法通过 map 操作符创建一个新的 observable，只观察 next 值而不创建额外的订阅。缺点是只能观察 next 值，无法处理错误情况。

方案二：创建新的 Observable

export class MyLink extends ApolloLink {
  constructor() {
    super((operation, forward) => {
      return new Observable((observer) => {
        const subscription = forward(operation).subscribe({
          next: (result) => {
            console.log(result);
            observer.next(result);
          },
          error: (e) => {
            console.log(e);
            observer.error(e);
          },
          complete: observer.complete.bind(observer)
        });

        return () => subscription.unsubscribe();
      });
    });
  }
}

这是更完整的解决方案，可以处理所有三种 observable 事件(next、error、complete)，同时避免了重复订阅问题。这也是 Apollo Client 内置链接常用的实现模式。

版本变更说明

值得注意的是，在 Apollo Client 3.7.14 版本中，这个问题可能不明显，而在 3.10.4 版本中变得明显。这实际上是一个修复而非退化，因为早期版本可能错误地进行了请求去重，而新版本更严格地遵循了 observable 的规范。

最佳实践建议

1. 在创建自定义链接时，始终考虑 observable 的订阅行为
2. 优先使用方案二的模式，特别是需要处理错误情况时
3. 确保正确处理 complete 事件和取消订阅逻辑
4. 在升级 Apollo Client 版本时，特别注意自定义链接的行为变化

通过理解这些概念和采用正确的实现模式，开发者可以创建高效可靠的自定义链接，而不会引入重复请求的问题。