如何只获取一次用户详细信息

Question

我有几个使用用户详细信息的组件。

由于用户详细信息不会经常更改，我只想获取一次。

一种方法是 -

const twentyFourHoursInMs = 1000 * 60 * 60 * 24
defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      refetchOnmount: false,
      refetchOnReconnect: false,
      retry: false,
      staleTime: twentyFourHoursInMs,
    },
  },
})

其他方法是在基础组件中获取一次数据，然后在其他组件中使用缓存数据 queryClient.getQueryData('user')

哪种方式更好？

Answer 1

queryClient.getQueryData('user') 不是访问组件中数据的好方法，因为它不像 useQuery 那样创建订阅。即使您设置了较高的 staleTime，您也可能希望手动使查询无效。

一个示例是在用户详细信息页面上，用户在该页面上更改了他们的姓名。进行变更后，您可能希望使用户详细信息查询无效，或者使用 queryClient.setQueryData.

更新变更响应中的数据

在这些情况下，您可能希望依赖于用户详细信息查询的组件使用新数据 re-render，为此，您需要 useQuery.

如果您想要真正的“仅一次”抓取，您需要：

staleTime: Infinity
cacheTime: Infinity

通过设置 staleTime，您可以定义资源被视为新鲜的时间。只要是新鲜的，数据就只会来自缓存。
通过设置更高的 cacheTime，可以避免查询被垃圾收集。默认情况下，如果您卸载所有具有观察者的组件（通过 useQuery），该查询将被视为不活动，然后将在 15 分钟后被垃圾收集。这是选择 useQuery 的另一个原因 - 因为它创建了一个观察器，使您的查询保持活动状态。
您不需要关闭refetchOn...标志。 React Query 只会对某些事件进行智能重新获取如果数据已过时 - 如果您设置了无限 staleTime，则永远不会。

如何只获取一次用户详细信息

How to fetch user details only once

react-query