What is the REACT QUERY way to reuse global state?

React Query 是一种用于处理异步数据获取和缓存的库，它可以在React应用中重用全局状态。以下是React Query用于重用全局状态的几种方法：

1. 使用缓存和状态共享: React Query 通过缓存机制实现数据的全局状态管理。每次发起数据请求时，React Query 首先会检查缓存中是否已经存在该数据。如果存在，它会直接从缓存中返回数据，而不是重新从服务器请求。这意味着，当多个组件请求相同的数据时，React Query 可以有效地重用缓存中的数据，减少不必要的网络请求。

   例子: 假设有多个组件需要获取用户的详细信息。通过React Query，你可以创建一个统一的查询钩子（如 useUserDetails），这个钩子在内部使用 useQuery 从API获取用户数据。不论这个钩子被用在应用的哪个部分，只要是相同的查询键和查询参数，返回的都是同一份缓存数据。

2. 配置全局查询客户端: React Query 允许你配置一个全局的 QueryClient 对象，这个对象管理着所有的查询和缓存。通过在应用的顶层配置这个 QueryClient 并通过 QueryClientProvider 提供给所有子组件，可以确保应用中的所有数据查询都使用同一个缓存策略和设置。

   例子: 在应用的根组件中配置 QueryClient 并包裹整个应用:

   javascript
   import { QueryClient, QueryClientProvider } from 'react-query';
   
   const queryClient = new QueryClient();
   
   function App() {
     return (
       <QueryClientProvider client={queryClient}>
         <MyComponent />
       </QueryClientProvider>
     );
   }

3. 同步状态到多个组件: 使用 React Query 的 useQuery 或 useMutation 钩子，状态更新可以自动传播到所有使用了相同查询的组件。这意味着，当一个组件触发了数据更新（例如通过 useMutation），所有使用该数据的组件都会自动接收到最新的数据。

   例子: 如果一个组件通过 useMutation 更新了数据库中的数据，而其他组件通过 useQuery 查询了同样的数据，那么这些查询会在数据更新后自动重新运行，从而获取到最新的数据。

总的来说，React Query 通过智能缓存和全局查询管理提供了一种非常有效的方式来重用全局状态，这样可以在不同的组件和页面间共享和同步数据，同时保持代码的简洁和效率。