React Query在URL变更时未重新获取数据的解决方法咨询

核心原因 #

React Query 通过 queryKey 的变化判断是否需要重新执行查询。你当前的queryKey仅设置为['ordersFetch']，未将影响请求URL的pageNumber.order纳入其中——因此即便pageNumber.order更新，React Query 仍会判定这是同一个查询，不会触发重新请求。

解决方案 #

将pageNumber.order添加到queryKey数组内，让React Query监听这个参数的变化：

var { isPending, isError, data } = useQuery({
    queryKey: ['ordersFetch', pageNumber.order], // 加入pageNumber.order作为queryKey的一部分
    queryFn: () => fetch(FETCH_ORDERS_API + pageNumber.order).then((res) => res.json())
})

补充说明 #

• 当pageNumber.order通过Context API更新时，组件会重新渲染，此时queryKey发生改变，React Query会自动取消未完成的旧请求，并发起新请求获取对应页码的数据。
• 这种写法遵循React Query的设计逻辑：queryKey需要包含所有影响查询结果的依赖项，以此保证缓存管理和重新触发逻辑的准确性。

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