React Query问题：重新获取数据前如何清除旧数据？

最优方案：把URL参数加入queryKey #

这是React Query设计的核心逻辑——queryKey是缓存的唯一标识，当URL参数变化时，直接把它放进queryKey里，useQuery会自动：

• 取消正在进行的旧请求
• 清除对应旧缓存数据
• 自动发起新请求

示例代码：

const { data, isLoading } = useQuery({
  queryKey: ['resourceData', urlParam], // urlParam为变化的URL参数
  queryFn: () => fetch(`/api/resource?param=${urlParam}`).then(res => res.json()),
});

特殊场景下手动控制（不推荐，仅当必须用refetch时） #

如果因为业务限制必须通过useEffect调用refetch，那可以用useQuery返回的remove方法手动清除旧数据：

1. 关闭useQuery的自动触发逻辑（设置enabled: false）
2. 在参数变化时，先调用remove()清除旧缓存，再执行refetch

示例代码：

const { data, refetch, remove } = useQuery({
  queryKey: ['resourceData'],
  queryFn: () => fetch(`/api/resource?param=${urlParam}`).then(res => res.json()),
  enabled: false, // 禁止自动发起请求
});

useEffect(() => {
  // 参数更新时先清除旧数据
  remove();
  // 发起新请求
  refetch();
}, [urlParam, refetch, remove]);

为什么之前的写法无效？ #

useQuery的refetch方法是基于当前queryKey重新发起请求，它不会主动清除旧缓存——除非queryKey发生变化，或者你手动调用remove方法。单纯调用refetch只会更新对应queryKey下的缓存，不会清除之前的无效数据。

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