Next.js使用Apollo Client BatchHttpLink生产环境报value.subscribe错误

问题根因 #

该错误由生产环境构建后Apollo Client链路执行逻辑异常导致，核心触发点有三个：

1. 链路顺序配置错误：当前链路顺序把响应解析中间件放在了最左侧，而Apollo中间件的响应处理是从右向左反向传递的，解析逻辑位置错误会导致非标准响应（如错误返回、空返回）被提前处理，生成非可订阅对象。
2. 响应解析中间件写法存在兼容问题：直接使用forward(operation).map的写法在生产环境代码压缩后，会因为Apollo内部Observable的原型方法名被改写导致逻辑失效，返回值不符合Observable规范。
3. errorLink缺少返回值：你在errorLink中调用了forward(operation)但没有返回该结果，导致生产环境下链路中断，返回undefined而非可订阅对象。

修复步骤 #

1. 调整链路执行顺序 #

把响应解析中间件移到靠近BatchHttpLink的位置，保证响应先完成解析再向上传递到其他中间件：

link: from([
  errorLink,
  authLink,
  parseBatchResponseMiddleware,
  batchHttpLink
])

2. 重写响应解析中间件 #

改用标准Observable写法规避生产压缩导致的方法丢失问题，同时兼容无payload的正常响应：

import { Observable } from '@apollo/client/utilities/observables/Observable';

const parseBatchResponseMiddleware = new ApolloLink((operation, forward) => {
  return new Observable(observer => {
    const subscription = forward(operation).subscribe({
      next: result => observer.next(result.payload ?? result),
      error: observer.error.bind(observer),
      complete: observer.complete.bind(observer)
    });
    return () => subscription.unsubscribe();
  });
});

3. 修复errorLink返回值 #

添加return语句保证链路正常传递：

const errorLink = onError(({ graphQLErrors, networkError, forward, operation }) => {
  if (graphQLErrors) {
    console.warn(graphQLErrors);
  }
  if (networkError) {
    console.warn(networkError);
  }
  return forward(operation);
});

额外检查 #

确认代码中已正确导入InMemoryCache和定义authLink，你贴出的配置片段中缺少这两部分的相关逻辑，若实际代码中也存在缺失也会触发生产环境异常。

内容的提问来源于stack exchange，提问作者Afsanefda