使用TanStack Query(React)检查对象是否在分页查询缓存中

当然可以实现这个需求，核心思路是遍历React Query中所有相关的分页查询缓存，逐一检查目标ID是否存在。

具体实现步骤 #

• 首先通过useQueryClient获取QueryClient实例，这是操作缓存的入口。
• 从QueryClient中拿到整个查询缓存，遍历所有缓存条目。
• 过滤出和你的分页API相关的缓存条目（比如以['character', ...]为queryKey的请求）。
• 对每个有效缓存条目（状态为成功的），取出返回的列表数据，检查是否包含目标ID的对象。

代码示例 #

可以封装一个自定义Hook来复用这个检查逻辑：

import { useQueryClient } from '@tanstack/react-query';

export function useIsCharacterInCache(targetId) {
  const queryClient = useQueryClient();
  const queryCache = queryClient.getQueryCache();

  // 遍历所有缓存条目
  for (const entry of queryCache.getAll()) {
    const { queryKey, state } = entry;
    // 过滤出字符分页查询的缓存（根据你的queryKey规则调整）
    if (queryKey[0] === 'character' && state.status === 'success') {
      // 假设API返回的结构是{ results: [...] }
      const characters = state.data?.results || [];
      // 检查是否存在目标ID的对象
      if (characters.some(char => char.id === targetId)) {
        return true;
      }
    }
  }
  return false;
}

使用方式 #

在组件里直接调用这个Hook即可：

function CharacterCheck({ characterId }) {
  const isInCache = useIsCharacterInCache(characterId);

  return (
    <div>
      该角色{isInCache ? '已存在于缓存中' : '未在缓存中找到'}
    </div>
  );
}

注意事项 #

• 要根据你实际的queryKey规则调整过滤条件，比如如果你的分页请求queryKey是['characters', { page: 4, name: 'ric' }]，那过滤时就检查queryKey[0] === 'characters'。
• 如果API返回的数据结构不同（比如直接返回数组而不是包含results的对象），要对应修改数据提取的逻辑。
• 这种遍历缓存的操作在缓存条目很多时可能有性能损耗，如果是高频调用，可以考虑维护一个单独的ID映射表，在每次分页请求成功后更新这个表，后续检查直接查表会更高效。

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