T3 Stack（Next.js 14）中TRPC getAll查询不更新问题求助

问题根源 #

你在users page.tsx里用await api.users.getAll.query()获取数据，这是服务器组件中的tRPC查询，Next.js 14默认会对这类查询做静态缓存。即使你在客户端调用invalidate，服务器端的静态缓存不会自动刷新，所以跳转后还是加载旧数据。

具体解决方案 #

方案1：禁用用户列表查询的静态缓存

在users/page.tsx中，给查询添加cache: "no-store"参数，强制每次请求都从服务器获取最新数据：

const usersList = await api.users.getAll.query(undefined, { cache: "no-store" });

或者在页面文件顶部添加动态配置，让整个页面变成动态渲染：

export const dynamic = "force-dynamic";

方案2：确保客户端失效操作正确执行

如果你的添加用户表单是客户端组件，要确保在onSuccess中异步等待失效操作完成后再跳转：

const addUserMutation = api.users.add.useMutation({
  onSuccess: async () => {
    // 等待失效操作完成
    await api.users.getAll.invalidate();
    router.push("/users");
  },
});

之前你用void ctx.users.getAll.invalidate()没有效果，大概率是因为没有等待异步操作完成就跳转，而且ctx可能不是客户端的api实例，直接用api客户端调用invalidate才是正确方式。

方案3：使用revalidateTag（可选）

如果你的tRPC路由配置了缓存标签，可以在mutation成功后重新验证对应标签：
在路由定义中给getAll查询添加标签：

export const router = createTRPCRouter({
  getAll: publicProcedure
    .meta({ tags: ["users"] })
    .query(() => {
      // 查询逻辑
    }),
  add: publicProcedure
    .input(z.object({/* 输入定义 */}))
    .mutation(async ({ input }) => {
      // 添加用户逻辑
    }),
});

然后在客户端的onSuccess中调用：

await api.utils.revalidateTags(["users"]);
router.push("/users");

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