React Query - 查询没有使用缓存？

Question

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

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，这就是为什么你会看到你的行为 - 每次调用 useQuery 时，React Query 都会在后台重新获取数据，因为它会立即认为数据已过时（即使它仍在缓存中） ).

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

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

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

React Query - 查询没有使用缓存？

React Query - query is not using cache?

react-query