Next.js集成Apollo Client切换页面时出现502 Bad Gateway错误排查

可能的原因及排查解决步骤 #

1. Apollo Client的splitLink配置遗漏请求处理 #

你的splitLink仅匹配名称以Directus开头的query类型操作，如果页面切换时触发了mutation、subscription，或是名称不匹配的query，这类请求会因无对应链路处理而失败，进而在Next.js服务端渲染时抛出未捕获错误，最终返回502。

排查&解决：

• 开启Apollo日志，查看页面切换时的具体请求：
  修改_createApolloClient添加日志配置：

  return new ApolloClient({
    link: splitLink,
    cache: new InMemoryCache(),
    defaultOptions: { /* 现有配置保留 */ },
    logger: console, // 生产环境可替换为自定义日志工具
  });
  

• 调整链路匹配逻辑，确保所有请求都有对应处理。若仅使用Directus一个GraphQL端点，直接移除splitLink，改用directusLink：

  return new ApolloClient({
    link: directusLink,
    cache: new InMemoryCache(),
    defaultOptions: { /* 现有配置保留 */ },
  });
  

  若需拆分链路，补充匹配规则兜底：

  const splitLink = split(
    ({ query }) => {
      const definition = getMainDefinition(query);
      return (
        definition.kind === "OperationDefinition" &&
        definition.name?.value.startsWith("Directus")
      );
    },
    directusLink,
    directusLink // 兜底链路，避免无匹配时请求失败
  );
  

2. 服务端渲染时的网络超时或限制 #

Staging环境中，Next.js服务器与Directus之间可能存在网络延迟、防火墙拦截，或Directus在页面切换的批量请求下响应超时，导致Next.js服务端返回502。

排查&解决：

• 给HttpLink添加超时配置，避免请求挂起：

  const directusLink = new HttpLink({
    uri: removeLastTrailingSlash(Directus.url),
    fetchOptions: {
      timeout: 10000, // 设置10秒超时，按需调整
    },
  });
  

• 在Staging服务器上测试Directus的响应速度：

  curl -w "%{time_total}\n" -X POST -H "Content-Type: application/json" -d '{"query":"query DirectusTest { users { id } }"}' <Directus_URL>
  

• 优化GraphQL查询（减少返回字段、添加缓存），或调整Next.js服务端超时配置（在next.config.js的serverRuntimeConfig中设置相关参数）。

3. 无缓存策略导致请求过载 #

全局设置fetchPolicy: "no-cache"会让页面切换时重复发起大量请求，导致Directus或Next.js服务器过载触发502。

排查&解决：

• 调整缓存策略，根据页面需求选择合适规则：

  defaultOptions: {
    watchQuery: {
      fetchPolicy: "cache-first", // 优先使用缓存
      errorPolicy: "all", // 改为all便于捕获错误
    },
    query: {
      fetchPolicy: "cache-first",
      errorPolicy: "all",
    },
  },
  

• 仅对需要实时数据的页面单独设置network-only等无缓存策略，不要全局禁用缓存。

4. SSR/SSG请求未处理错误 #

页面切换时，若getServerSideProps或getStaticProps中的Apollo请求未捕获错误，会导致服务端抛出未处理异常，返回502。

排查&解决：

• 给服务端请求添加错误捕获：

  export async function getServerSideProps(context) {
    const client = getApolloClient();
    try {
      const { data } = await client.query({
        query: YOUR_QUERY,
      });
      return { props: { data } };
    } catch (error) {
      console.error("Apollo请求错误:", error);
      return { props: { data: null } }; // 返回降级数据或重定向
    }
  }
  

5. Staging环境反向代理配置问题 #

若使用Nginx等反向代理，可能因超时设置、缓冲区不足等配置错误导致502。

排查&解决：

• 查看代理服务器日志，确认是否有超时或缓冲区溢出记录。
• 调整代理超时配置（以Nginx为例）：

  proxy_connect_timeout 10s;
  proxy_send_timeout 10s;
  proxy_read_timeout 10s;
  proxy_buffer_size 16k;
  proxy_buffers 4 16k;
  

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