使用Query hook与queryClient.fetchQuery,何时更喜欢其中一个



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

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

上述逻辑正确吗?请就使用一个而不是另一个的最佳实践提出建议

fetchQuery是获取数据的必要方法。在渲染过程中不能调用此函数,因为这将是一个副作用,并且不能将结果await。所以你需要产生一个useEffect。

另一个区别是useQuery创建了对queryKey的订阅,但fetchQuery没有。因此,如果数据由于其他原因而更新(例如第二个组件安装并触发查询的重新刷新,或者因为您聚焦窗口而查询过时而在后台进行刷新(,则您的组件将而不是重新渲染并显示新数据。

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

这是您想要useQueryenabled选项的位置,这样您就可以在不满足条件的情况下disable查询。


底线是:两者不可互换,我几乎从未使用过fetchQuery。对于组件,始终使用查询

有一个非常好的fetchQuery(属于React Query(与React router dom的用例,@TkDodo在这篇精彩的文章中对此进行了解释https://tkdodo.eu/blog/react-query-meets-react-router.

简单地说,您可以使用react路由器dom(在v6之后(在渲染之前开始获取的功能,并通过添加react查询的缓存管理和其他好东西来进一步获取此属性。

它有点复杂,相对来说编码更多,但我想它的好处已经不在讨论范围内了。

相关内容

最新更新