React Query - 查询不使用缓存？

Question

useQuery我在几个 React 组件中使用了以下定义：

useQuery("myStuff", getMyStuffQuery().queryFn);

哪里getMyStuffQuery看起来像这样：

export const getMyStuffQuery = () => {
    return {
    queryFn: () => makeSomeApiCall(),
}}

我希望虽然所有这些组件都会呈现，但makeSomeApiCall()只会进行一次 API 调用，其余时间将使用第一次调用产生的缓存。

makeSomeApiCall()然而，每当任何所述组件呈现时，它似乎都会一次又一次地调用。

为什么 React Query 不使用缓存？难道我做错了什么？

Answer 1

React Query 默认会缓存查询的数据，但这并不影响它是否认为数据是陈旧的。useQuery()如果它认为数据已经过时，它会在每次调用时调用查询函数（点击 API） 。这意味着它会从缓存中读取数据（如果有），但由于它认为数据已过时，因此仍会在后台调用 API 来获取任何更新的数据。

幸运的是，您可以完全控制 React Query 是否认为数据已过时。您可以设置一个staleTime配置选项来控制特定数据应被视为新鲜的时间。您甚至可以将其设置Infinity为只要您的应用程序打开，它就应该只调用一次查询函数（点击 API）。默认情况下，该值为 0，这就是为什么您会看到这样的行为 - React Query 每次被useQuery调用时都会在后台重新获取数据，因为它立即认为数据已过时（即使它仍然被缓存）。

在您的示例中，如果您确实只想调用一次 API，则只需将该staleTime选项设置为Infinity。

useQuery("myStuff", getMyStuffQuery().queryFn, { staleTime: Infinity });

此选项以及所有其他选项可以在此处的文档中阅读：https://react-query.tanstack.com/reference/useQuery

Answer 2

React Query 的请求缓存模型略有不同。

请求可以缓存其结果，并且这些结果可能会过时。

缓存的结果会立即返回，但如果过时，它们会在后台重新获取并更新缓存。

默认配置将结果缓存 5 分钟，并立即使其过时。

请参阅： https: //tanstack.com/query/v4/docs/guides/caching

和可以设置为选项对象的一部分，如此处所示cacheTime，设置 5 分钟的缓存时间和 1 分钟的过时时间。staleTimeuseQuery

useQuery({ queryKey: ['todos'], queryFn: fetchTodos, staleTime: 1 * 60 * 1000, cacheTime: 5 * 60 * 1000 });

可以使用以下选项更改重新获取缓存结果策略refetchOnWindowFocus

请参阅：https://tanstack.com/query/v4/docs/guides/important-defaults

您可以在窗口焦点事件上停止重新获取过时值，如下所示：

const client = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
});