useQuery hook 与 queryClient.fetchQuery,何时更喜欢一个

useQuery hook vs queryClient.fetchQuery, when to prefer one over the other

queryClient.fetchQuery 可以用来代替 react-query 提供的 useQuery 钩子。关于在哪种情况下的任何指导方针和最佳实践,一个应该优先于另一个。

一个场景可能是我们想要有条件地获取数据。因此,queryClient.fetchQuery 看起来更自然,而 useQuery 钩子则不然。

以上逻辑是否正确?请就使用其中一种的最佳做法提出建议

fetchQuery 是获取数据的命令式方式。您不能在渲染期间调用它,因为它会产生副作用并且您不能 await 结果。所以你需要产生一个useEffect。

另一个区别是 useQuery 创建了对 queryKey 的订阅,但 fetchQuery 没有。因此,如果数据由于其他原因更新(例如第二个组件挂载并触发查询的重新获取,或者您在后台重新获取因为您关注 window 并且查询已过时),您的组件将重新渲染并显示新数据。

One scenario might be where we want to conditionally fetch data.

这是你想要 useQueryenabled 选项的地方,这样你就可以 disable 只要不满足条件就可以查询。


底线是:两者不可互换,我几乎没用过fetchQuery。对于组件,始终 useQuery