How to get currently active queryKeys in react- query

React Query 是一个强大的数据同步库，用于在 React 应用程序中管理服务器状态。它通过提供一系列钩子（hooks）和工具来简化数据获取、缓存、同步和更新的过程。

在React Query中，每一个query都由一个唯一的识别码即queryKey标识。这个queryKey通常是一个字符串或者一个由字符串和对象组成的数组。queryKey在获取、缓存和无效化数据时起到了非常重要的作用。

要获取当前起作用的queryKeys，我们可以使用React Query提供的开发者工具，或者通过React Query的API来编程检索。

以下是一个例子，展示了如何使用useQuery钩子获取数据及其对应的queryKey：

javascript
import { useQuery } from 'react-query';

function fetchUserData(userId) {
  return fetch('https://my.api/user/' + userId).then(res => res.json());
}

function UserProfile({ userId }) {
  // 在这个例子中，queryKey是['user', userId]，它包含了一个字符串和一个动态的userId
  const { data, error, isLoading } = useQuery(['user', userId], () => fetchUserData(userId));

  if (isLoading) return 'Loading...';
  if (error) return 'An error has occurred: ' + error.message;

  // 渲染用户数据
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  );
}

在上面这个例子中，useQuery钩子的第一个参数是queryKey（在这个例子中是['user', userId]）。queryKey通常是一个字符串或一个数组，它确定了query的唯一性，并且是缓存机制的关键。

如果你想要获取应用中所有激活的query keys，可以使用React Query的useQueries钩子或者查询缓存对象queryCache。例如：

javascript
import { useQueryClient } from 'react-query';

function ListActiveQueries() {
  const queryClient = useQueryClient();
  
  // 获取缓存中所有query的信息
  const queriesInfo = queryClient.getQueriesData();

  // 提取所有激活的query keys
  const activeQueryKeys = queriesInfo.map(query => query.queryKey);

  // 渲染所有激活的query keys
  return (
    <ul>
      {activeQueryKeys.map(key => (
        <li key={key}>{JSON.stringify(key)}</li>
      ))}
    </ul>
  );
}

在这个例子中，我们使用了useQueryClient钩子来获取当前的queryClient实例，然后调用了getQueriesData方法来检索缓存中所有query的信息。getQueriesData方法返回一个数组，每个元素都包含了一个query的详细信息，包括其queryKey。然后我们通过映射此数组来获取所有的queryKeys，并将它们渲染到列表中。

请注意，queryKeys通常会是复杂的结构，可能需要序列化（如上面使用JSON.stringify）才能正确地显示。