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.
这是你想要 useQuery
的 enabled
选项的地方,这样你就可以 disable
只要不满足条件就可以查询。
底线是:两者不可互换,我几乎没用过fetchQuery
。对于组件,始终 useQuery
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.
这是你想要 useQuery
的 enabled
选项的地方,这样你就可以 disable
只要不满足条件就可以查询。
底线是:两者不可互换,我几乎没用过fetchQuery
。对于组件,始终 useQuery