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

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。

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

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

staleTime: Infinity
cacheTime: Infinity

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