Apollo Client + Next.js 非SSR请求无法发送问题求助

问题根因排查方向 #

• 最常见的原因是客户端环境下process.env.API_ENDPOINT未定义：大部分SSR框架（如Next.js、Nuxt.js等）默认不允许客户端访问未加特殊前缀的环境变量，客户端运行时该值为undefined，导致Apollo Client没有有效请求地址，不会发起请求。
• 次常见原因是自定义Apollo Link中间件逻辑错误：如果配置了鉴权、日志等自定义链路中间件，可能存在逻辑漏洞直接拦截了请求，没有向下传递到发送请求的链路节点。
• 缓存初始化逻辑缺陷：你当前客户端初始化时每次创建空缓存，若服务端渲染后已把缓存序列化到页面HTML中，客户端未做缓存恢复会导致状态不一致，但不会直接导致请求无法发出。

修复步骤 #

1. 修正环境变量配置
   先在客户端代码中打印process.env.API_ENDPOINT验证是否为undefined，如果是则按照你使用的框架规则修改环境变量名称，比如Next.js框架需要给客户端可访问的环境变量添加NEXT_PUBLIC_前缀：

# 你的环境变量配置文件
NEXT_PUBLIC_API_ENDPOINT=你的接口地址

对应修改createApolloClient中的uri配置：

uri: process.env.NEXT_PUBLIC_API_ENDPOINT,

2. 优化Apollo Client实例创建逻辑，支持缓存恢复
   修改实例创建函数，新增初始缓存参数，复用服务端渲染生成的缓存数据：

export function createApolloClient(ssrMode = typeof window === 'undefined', initialCache = {}) {
  return new ApolloClient({
    ssrMode,
    uri: process.env.NEXT_PUBLIC_API_ENDPOINT,
    cache: new InMemoryCache().restore(initialCache),
  });
}

修改useApollo钩子，关联页面props中的缓存数据作为依赖，避免不必要的实例重建：

export function useApollo(pageProps) {
  const initialCache = pageProps?.apolloState ?? {};
  return useMemo(() => createApolloClient(false, initialCache), [initialCache]);
}

修改_app.tsx中的调用逻辑，传入页面props：

function MyApp({ Component, pageProps }: AppProps) {
  const client = useApollo(pageProps);
  // 其余原有逻辑保持不变
  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <Modal />
        <Toast />
        <Component {...pageProps} />
      </Provider>
    </ApolloProvider>
  );
}

3. 兜底排查方案
   如果完成上述修改后问题依然存在，可以在客户端初始化的Apollo Client实例上开启调试日志，查看内部执行链路的报错信息：

import { setVerbosity } from "apollo-client";
setVerbosity("debug");

同时检查你配置的所有Apollo Link中间件，确认没有逻辑错误拦截了正常请求。

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