queryClient.fetchQuery
可以代替react查询提供的useQuery
钩子。任何指导方针和最佳实践,在哪种情况下,一种应该优先于另一种。
一种情况可能是我们想要有条件地获取数据。因此,queryClient.fetchQuery看起来更自然,而useQuery钩子则不然。
上述逻辑正确吗?请就使用一个而不是另一个的最佳实践提出建议
fetchQuery
是获取数据的必要方法。在渲染过程中不能调用此函数,因为这将是一个副作用,并且不能将结果await
。所以你需要产生一个useEffect。
另一个区别是useQuery
创建了对queryKey的订阅,但fetchQuery
没有。因此,如果数据由于其他原因而更新(例如第二个组件安装并触发查询的重新刷新,或者因为您聚焦窗口而查询过时而在后台进行刷新(,则您的组件将而不是重新渲染并显示新数据。
一种场景可能是我们想要有条件地获取数据。
这是您想要useQuery
的enabled
选项的位置,这样您就可以在不满足条件的情况下disable
查询。
底线是:两者不可互换,我几乎从未使用过fetchQuery
。对于组件,始终使用查询
有一个非常好的fetchQuery(属于React Query(与React router dom的用例,@TkDodo在这篇精彩的文章中对此进行了解释https://tkdodo.eu/blog/react-query-meets-react-router.
简单地说,您可以使用react路由器dom(在v6之后(在渲染之前开始获取的功能,并通过添加react查询的缓存管理和其他好东西来进一步获取此属性。
它有点复杂,相对来说编码更多,但我想它的好处已经不在讨论范围内了。