React Query中如何在外部访问useQueries的queryKey

要在外部访问useQueries内部定义的queryKey，有几个简单直接的方案，根据你的实际场景选择即可：

方案一：抽离queryKey生成逻辑 #

把生成queryKey的逻辑单独抽成独立的函数或变量，让内部和外部都能复用，这是最干净的做法：

// 单独定义生成queryKey的函数，确保内外逻辑一致
const getUserQueryKey = (user) => [`INeedThisValue_${user.id}`]; // 用user的唯一标识区分不同查询

const result = () => {
  return useQueries(
    users.map(user => ({
      queryKey: getUserQueryKey(user),
      queryFn: () => client.getUserData().toPromise()
    }))
  );
};

// 在外部调用的地方，直接复用同一个函数生成queryKey
const externalQueryKeys = users.map(user => getUserQueryKey(user));

方案二：让函数同时返回查询结果和queryKey列表 #

如果需要让queryKey和对应的查询结果一一对应，可以修改result函数，让它返回包含结果和queryKey的对象：

const result = () => {
  // 先生成所有查询配置，保存下来
  const queryConfigs = users.map(user => ({
    queryKey: [`INeedThisValue_${user.id}`],
    queryFn: () => client.getUserData().toPromise()
  }));
  // 执行useQueries获取结果
  const queryResults = useQueries(queryConfigs);
  // 同时返回结果和对应的queryKey列表
  return {
    results: queryResults,
    queryKeys: queryConfigs.map(config => config.queryKey)
  };
};

// 外部调用时直接解构获取
const { results, queryKeys } = result();

方案三：通过React Query客户端获取已缓存的queryKey #

如果已经执行过查询，也可以通过React Query的客户端实例，从缓存中提取已存在的queryKey：

// 假设你已经有React Query的client实例
const queryCache = client.getQueryCache();
// 获取所有缓存的查询的queryKey
const allQueryKeys = queryCache.getAll().map(query => query.queryKey);
// 筛选出你需要的目标queryKey（比如前缀匹配）
const targetQueryKeys = allQueryKeys.filter(key => key[0] === 'INeedThisValue');

内容的提问来源于stack exchange，提问作者Rabindra Yadav