React Query页面跳转后重复查询数据问题求助

你遇到的核心问题几乎可以确定是Query Key未包含唯一标识字段（result-id），再结合其他可能的配置细节问题，导致缓存未被正确复用。以下是具体排查点和修复方案：

1. 必须将result-id加入Query Key #

React Query的缓存完全由queryKey作为唯一标识，你当前的queryKey: ["get-data"]是固定值，没有关联请求依赖的result-id：

• 即使两个页面使用同一个result-id，React Query无法通过固定的queryKey识别这是同一个查询的复用请求
• 如果后续出现不同result-id的场景，还会出现缓存互相覆盖的问题

修复后的自定义Hook示例：

function useSignupdataQuery() {
  const searchParams = useSearchParams();
  const resultId = searchParams.get('result-id');
  
  return useQuery({
    // 将result-id作为queryKey的一部分，确保每个唯一请求有独立缓存
    queryKey: ["get-data", resultId],
    queryFn: () => fetch(`/api/signup/result?result-id=${resultId}`).then(res => res.json()),
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false,
    staleTime: Infinity,
    gcTime: Infinity,
  });
}

2. 检查全局配置是否覆盖Hook参数 #

确认你的QueryClient全局配置没有强制设置重拉取规则，比如以下全局配置会覆盖Hook级的refetchOnMount: false：

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnMount: true, // 这个全局配置会优先于Hook设置
    },
  },
});

如果存在此类配置，要么修改全局默认值，要么在Hook中明确设置对应参数（Hook级配置优先级更高）。

3. 排查是否有意外的缓存清除操作 #

检查跳转页面前后的逻辑，是否执行了以下会清除/失效缓存的操作：

// 清除指定Key的缓存
queryClient.removeQueries(["get-data"]);
// 标记缓存为过时，触发重拉取
queryClient.invalidateQueries(["get-data"]);
// 清空所有缓存
queryClient.clear();

这些操作会直接导致缓存失效，即使你设置了gcTime: Infinity也无法复用缓存。

4. 确认result-id的获取时机 #

确保在新页面调用useSignupdataQuery时，searchParams已经正确获取到result-id，避免因参数未就绪导致queryFn发起错误请求，后续又触发重新查询。

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