React Query重新获取时使用旧查询参数的问题求助

1. 初始双请求问题的核心：Query Key 未关联请求参数 #

你最初的代码里，useQuery的Query Key是固定的[queryKey]（即["tickets"]），但请求路径依赖window.location.search——这就造成了Query Key与请求参数不匹配的矛盾：

• 操作筛选组件修改URL后，组件重新渲染，window.location.search已更新，但Query Key仍为["tickets"]，React Query会用新请求结果覆盖旧缓存（因为Key相同）。
• 窗口聚焦触发refetch时，会同时触发两个请求：
  • 一个是当前组件基于最新window.location.search发起的带过滤参数的请求；
  • 另一个是旧Query Key（["tickets"]）对应的缓存仍被标记为活跃，React Query触发该Key的refetch，此时请求逻辑未捕获到URL参数变化，于是发起不带参数的请求。

这两个请求几乎同时发出，就导致列表短暂显示无过滤数据后再被新数据覆盖。

2. 修改Query Key后旧请求残留的原因 #

将Query Key改为[queryKey, window.location.search]后，URL参数变化会同步改变Query Key，React Query会把不同参数的查询视为独立新查询，各自维护缓存：

• UI不再显示旧数据，因为当前组件绑定的是最新Query Key对应的缓存，旧Key的缓存不会被当前组件调用。
• 旧请求仍存在，是因为React Query默认会保留缓存（cacheTime默认5分钟），若旧Query Key对应的查询还在缓存有效期内，窗口聚焦时可能触发所有未被垃圾回收的stale查询的refetch；另外组件更新过程中，旧的useQuery实例未完全卸载，也可能触发一次旧参数的请求。

解决旧请求残留的建议 #

• 组件卸载时调用queryClient.removeQueries([旧Query Key])，主动清理不需要的旧查询缓存，避免其触发refetch。
• 调整refetchOnWindowFocus配置，比如仅让当前活跃的查询触发refetch，或针对特定Query Key设置该行为。

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