Next.js中Apollo Client部分请求禁用缓存失效问题求助

核心原因 #

Apollo Client 的 fetchPolicy 是控制Apollo自身缓存的策略，但你遇到的重复Token问题，本质是Next.js/fetch 层面的请求缓存导致的——HttpLink 底层依赖浏览器的 fetch API，而 Next.js 对 fetch 默认启用了缓存机制，这会让相同的mutation请求被浏览器/Next.js缓存，返回旧的Token。

局部禁用缓存的解决方案 #

不需要全局修改客户端配置，直接给登录mutation单独添加fetch级别的缓存禁用配置：

方案1：在mutation调用中添加fetchOptions #

修改你的登录请求代码，在mutate的配置里加入fetchOptions，仅针对该请求禁用缓存：

const { data } = await getClient().mutate({
  mutation: LOGIN_MUTATION,
  variables: {
    email,
    password,
  },
  // Apollo层面的缓存策略（可选，mutation默认不缓存结果）
  fetchPolicy: "network-only",
  // 关键：禁用fetch/Next.js层面的缓存
  fetchOptions: {
    cache: "no-store"
  }
});

方案2：通过请求头控制缓存 #

如果更倾向用HTTP标准头来控制，也可以设置Cache-Control头：

const { data } = await getClient().mutate({
  mutation: LOGIN_MUTATION,
  variables: {
    email,
    password,
  },
  fetchOptions: {
    headers: {
      'Cache-Control': 'no-store'
    }
  }
});

额外检查点 #

• 确认服务器端没有为登录接口设置过长的Cache-Control响应头，避免浏览器主动缓存响应结果。
• 确保LOGIN_MUTATION的定义正确，没有意外复用旧的请求参数或缓存数据。

内容的提问来源于stack exchange，提问作者Pierre Olivier Tran