React Query 如何让缓存的数据失效？

React Query 提供了几种方法来让缓存的数据失效，从而触发新的数据获取。以下是一些常见的策略：

1. 自动重新获取 (Automatic Refetching): React Query 默认在一些特定的情况下自动重新获取数据，比如重新聚焦窗口或者网络重新连接时。这是通过配置项 refetchOnWindowFocus 和 refetchOnReconnect 控制的。

2. 定时重新获取 (Stale Time): 通过 staleTime 配置项，你可以指定数据在多长时间后过时（变为 "stale"），一旦数据过时，任何对该数据的查询将会触发重新获取。

   jsx
   useQuery('todos', fetchTodos, {
     staleTime: 5000, // 5 秒后数据过时
   });

   在这个例子中，fetchTodos 是一个函数，它获取待办事项数据。数据将在5秒钟后被认为是陈旧的，这时如果组件重新渲染或者有新的请求发起查询，React Query 将会重新获取数据。

3. 手动重新获取 (Refetching): 你可以使用由 useQuery 返回的 refetch 函数来手动触发数据的重新获取。

   jsx
   const { data, refetch } = useQuery('todos', fetchTodos);
   
   // 在某个交互或者事件中调用 refetch
   // 例如一个按钮的点击事件
   <button onClick={() => refetch()}>Reload</button>

4. 使缓存无效 (Invalidation): React Query 的 invalidateQueries 函数可以用来使特定的查询或所有查询数据无效，从而触发重新获取。这通常在数据发生变化后使用，如提交表单或更新数据操作之后。

   jsx
   const queryClient = useQueryClient();
   
   // 假设 'todos' 是我们想要使失效的查询的键
   queryClient.invalidateQueries('todos');

   例如，如果你有一个添加新待办事项的功能，在添加完成后，你可能想要使待办事项列表的缓存数据失效，以确保列表是最新的。

5. 乐观更新 (Optimistic Updates): 在进行数据变更操作（如更新或删除）时，你可以先更新缓存中的数据，然后再执行异步操作，如果操作失败了，则回滚缓存中的数据。这是一种高级策略，可以提升用户体验，因为它使得界面响应更快。

   jsx
   const queryClient = useQueryClient();
   
   queryClient.setQueryData('todos', old => {
     // 假设我们要添加一个新的待办事项
     return [...old, newTodo];
   });
   
   // 然后发送请求到服务器
   // 如果请求失败，就回滚缓存数据

这些是React Query处理缓存数据失效的一些基本方法，通常你可以根据应用的需要选择合适的策略或者将它们结合起来使用。