为什么在react-query中使用QueryClient.prefetchQuery而不是useQuery进行缓存？

Question

为什么我应该使用

QueryClient.prefetchQuery

而不是

useQuery

在 React-Query 中进行缓存？

我没有看到任何有价值的用例。如果我想预取，我可以在加载应用程序时使用

useQuery

，而不实际使用获取的值。当我在其他地方使用它时，我会得到之前的缓存结果

useQuery

。至少我是这么看的。

但我想我错过了一些东西。也许与SSR有关。

Answer 1

您读过有关完善的文档吗？它可用于在渲染之前获取某些内容，以便在用户导航到该内容后您可以立即看到数据。如果您等到 useQuery 尝试读取数据，您将不可避免地稍后获取，从而看到加载旋转器。

我们还在我们的示例之一中使用预取：

https://tanstack.com/query/v4/docs/react/examples/react/prefetching

Answer 2

const { queryProblem, queryComments } = useIssue();

queryClient.prefetchQuery 在安装组件之前使用，以除条件或事件之外的任意代码发出请求。

例如，您可以在 OnMouseEnter 事件触发时执行 prefetchQuery。

Answer 3

prefetchQuery

和

useQuery

之间的一个关键区别是，只要

useQuery

的缓存无效，

queryKey

就会重新执行（从而触发重新渲染），而

prefetchQuery

不会。因此，如果您有一个

mounted

useQuery 钩子，并且针对其查询键执行突变并使用

invalidateQueries

，则

useQuery

钩子将重新渲染。但是，

prefetchQuery

不会重新渲染。如果您实际上只是预完善数据，那么您不希望 fetch hook 在其缓存失效时重复触发重新渲染，这就是

prefetchQuery

的用例。

因此，虽然

prefetchQuery

可能看起来与

useQuery

执行相同的功能，但它应该是预取的首选选项。