How to best get data from react-query cache?

当您使用 React Query 时，它提供了一种在前端应用中以一致和优雅的方式管理服务器状态的方法。React Query 会自动将数据缓存起来，并允许您用简单的 API 从缓存中获取数据。以下是 React Query 从缓存中获取数据的基本步骤：

1. 安装和引入 React Query： 在您的项目中安装 React Query，并在您的组件中引入相应的钩子，比如 useQuery。

   bash
   npm install react-query

   或者

   bash
   yarn add react-query

2. 使用 useQuery 钩子： 使用 useQuery 钩子来发起请求并从缓存中获取数据。useQuery 需要至少两个参数：一个唯一的缓存键和一个用来获取数据的异步函数。

   jsx
   import { useQuery } from 'react-query';
   
   // 异步函数，用于获取数据
   const fetchData = async () => {
     const response = await fetch('https://api.example.com/data');
     return response.json();
   };
   
   // 组件内部
   const { data, isLoading, error } = useQuery('uniqueCacheKey', fetchData);

   在这个例子中，'uniqueCacheKey' 是缓存键，用于标识和存储所获取的数据。fetchData 是一个异步函数，它从服务器获取数据。

3. 从缓存读取数据： 当组件使用相同的缓存键调用 useQuery 时，React Query 会首先检查缓存中是否有匹配的数据。如果缓存中有数据，它会立即返回这些数据，而不是再次发起网络请求。

   jsx
   // 另一个组件使用同样的缓存键
   const { data, isLoading, error } = useQuery('uniqueCacheKey', fetchData);

4. 缓存更新和失效： React Query 提供了灵活的缓存时间和更新机制。例如，您可以设置数据在一定时间后失效，或者在某些事件（如窗口重新聚焦）时重新获取数据，以确保用户总是看到最新的信息。

   jsx
   const { data, isLoading, error } = useQuery('uniqueCacheKey', fetchData, {
     staleTime: 5 * 60 * 1000, // 数据在5分钟后变为陈旧
     refetchOnWindowFocus: true // 窗口重新聚焦时重新获取数据
   });

5. 手动管理缓存数据： 若需要，您可以使用 React Query 提供的 queryClient 方法来手动更新或者失效特定的缓存键对应的数据。

   jsx
   import { useQueryClient } from 'react-query';
   
   const queryClient = useQueryClient();
   
   // 手动使缓存数据失效
   queryClient.invalidateQueries('uniqueCacheKey');
   
   // 手动更新缓存数据
   queryClient.setQueryData('uniqueCacheKey', updatedData);

通过这种方式，React Query 优化了数据的加载，减少了不必要的网络请求，同时保证了数据的最新性。它能够非常有效地处理后台数据同步，同时减轻了开发者手动管理缓存逻辑的负担。