Apollo Client缓存问题：彻底禁用缓存或修复Next.js数据不更新异常

针对PayloadCMS数据更新后Next.js网站无法同步的问题，结合当前配置，可通过以下步骤彻底禁用客户端缓存，确保每次请求都获取最新数据：

1. 优化Apollo Client核心配置 #

修改你的Apollo Client初始化代码，强化缓存禁用策略，覆盖HTTP层面和Apollo内部缓存：

import { HttpLink } from "@apollo/client";
import {
  registerApolloClient,
  ApolloClient,
  InMemoryCache,
} from "@apollo/experimental-nextjs-app-support";

export const { getClient } = registerApolloClient(() => {
  return new ApolloClient({
    link: new HttpLink({
      uri: `${process.env.NEXT_PUBLIC_ADMIN_BASE_URI}/api/graphql`,
      // 禁用浏览器HTTP缓存，避免GET请求被缓存
      fetchOptions: {
        cache: "no-store",
      },
    }),
    defaultOptions: {
      query: {
        // 强制每次请求都走网络，且不将结果存入缓存
        fetchPolicy: "no-cache",
        // 后续自动触发的请求也保持该策略
        nextFetchPolicy: "no-cache",
      },
      watchQuery: {
        fetchPolicy: "no-cache",
        nextFetchPolicy: "no-cache",
      },
    },
    // 仅在服务端环境启用SSR模式，避免客户端复用服务端缓存
    ssrMode: typeof window === "undefined",
    cache: new InMemoryCache({
      // 禁用Apollo的结果缓存
      resultCaching: false,
      // 兜底配置：确保所有查询字段不使用缓存
      typePolicies: {
        Query: {
          fields: {
            '*': {
              read(_, { args, toReference }) {
                return toReference({
                  __typename: 'Query',
                  [JSON.stringify(args)]: true,
                });
              },
            },
          },
        },
      },
    }),
  });
});

关键修改说明： #

• fetchOptions: { cache: "no-store" }：直接控制浏览器的HTTP缓存行为，禁止缓存GraphQL请求。
• fetchPolicy: "no-cache"：与network-only的区别是，该策略不仅强制走网络请求，还不会将响应结果存入Apollo的InMemoryCache，彻底切断缓存读取路径。
• 动态ssrMode：避免客户端组件复用服务端渲染时生成的缓存，确保客户端请求独立获取最新数据。
• typePolicies兜底：防止某些特殊查询字段未被默认配置覆盖，确保所有查询都不依赖缓存。

2. 组件层面的缓存控制 #

• Server Components：在使用Apollo Client的Server Component顶部添加export const revalidate = 0;，强制Next.js每次请求都重新渲染组件，不使用静态生成缓存。
• Client Components：如果使用useQuery，显式指定fetchPolicy="no-cache"（即使全局配置已设置，显式指定可避免局部配置覆盖）：

  const { data } = useQuery(GET_YOUR_DATA_QUERY, {
    fetchPolicy: "no-cache",
  });
  

3. 额外检查项 #

• 确认PayloadCMS的GraphQL API返回的响应头中包含Cache-Control: no-cache, no-store, must-revalidate，避免API端设置的缓存影响客户端。
• 若使用Next.js的generateStaticParams或静态生成功能，需调整为动态渲染模式，确保页面不会被静态缓存。

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