Next.js App Router中React Query二次加载页面返回旧数据问题

1. 精准控制React Query缓存失效 #

你之前的invalidateQueries()未指定具体查询键，导致React Query无法定位要失效的缓存条目。首先确保useQuery使用包含路由参数的唯一查询键：

// 把collection和id加入queryKey，确保每条记录对应唯一缓存
const { data } = useQuery({
  queryKey: ['record', collection, id],
  queryFn: async () => {
    const res = await fetch(`/api/records?collection=${collection}&id=${id}`);
    return res.json();
  },
});

然后在组件卸载时，精准失效该查询键对应的缓存：

useEffect(() => {
  return () => {
    // 仅失效当前记录的缓存，不影响其他查询
    queryClient.invalidateQueries({ queryKey: ['record', collection, id] });
  };
}, [queryClient, collection, id]);

2. 优化本地状态同步逻辑 #

原useEffect在record已有数据时会跳过更新，但返回路由时record可能保留之前的状态，导致新data无法同步。可以监听路由参数变化，先清空本地状态：

// 当collection或id变化时，重置本地编辑状态
useEffect(() => {
  setRecord({});
}, [collection, id]);

// 仅当data更新时同步到本地状态
useEffect(() => {
  if (!data) return;
  setRecord({ ...data });
}, [data]);

3. 强制刷新页面的备用方案 #

如果缓存方案仍不生效，可在跳转时强制刷新页面：

用Next.js Router强制刷新 #

import { useRouter } from 'next/navigation';

const router = useRouter();

// 跳转时开启强制刷新
router.push('/record?collection=1&id=1', { forceRefresh: true });

原生跳转（彻底绕过缓存） #

// 直接触发全页面刷新
window.location.href = '/record?collection=1&id=1';

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