useQuery hook vs queryClient.fetchQuery，何时更喜欢其中一个答案

【问题标题】：useQuery hook vs queryClient.fetchQuery, when to prefer one over the otheruseQuery hook vs queryClient.fetchQuery，何时更喜欢其中一个
【发布时间】：2022-01-01 09:55:52
【问题描述】：

queryClient.fetchQuery 可以用来代替 react-query 提供的 useQuery 钩子。任何指导方针和最佳实践，都应该优先于其他。

一种情况可能是我们想要有条件地获取数据。因此，queryClient.fetchQuery 看起来更自然，而 useQuery 挂钩则不然。

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

【问题讨论】：

标签： react-query

【解决方案1】：

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

另一个区别是useQuery 创建了对queryKey 的订阅，而fetchQuery 没有。因此，如果数据因其他原因而更新（例如第二个组件挂载并触发重新获取查询，或者您在后台重新获取，因为您聚焦窗口并且查询已过时），您的组件将不会重新渲染并显示新数据。

一种情况可能是我们想要有条件地获取数据。

这是您想要useQuery 的enabled 选项的地方，这样只要不满足条件，您就可以disable 查询。

底线是：两者不可互换，我几乎从未使用过fetchQuery。对于组件，总是useQuery

【讨论】：