React Query中按不同查询键重复存储数据对象是否为标准做法？

这确实是React Query的标准处理方式，它的缓存系统完全基于queryKey做唯一标识——每个queryKey对应独立的缓存条目，哪怕两条查询返回的数据内容重叠，只要queryKey不同，就会分开存储。

之所以这么设计，是为了保证每个查询的独立性：比如获取全量帖子的接口可能只返回基础字段，而单条帖子接口会返回更详细内容；或者全量帖子的更新频率远低于单条帖子，分开缓存能避免两者的更新逻辑互相干扰。

如果担心内存占用过高，可以通过以下方式优化：

• 复用已有缓存数据
  如果单条帖子的数据能从全量帖子缓存中提取，直接在queryFn里先读取全量缓存，存在就返回对应数据，不存在再发起请求：

  const queryClient = useQueryClient();
  
  useQuery({
    queryKey: ['posts', 1],
    queryFn: async () => {
      // 先尝试从全量缓存中取数据
      const allPosts = queryClient.getQueryData(['posts']);
      if (allPosts) {
        return allPosts.find(post => post.id === 1);
      }
      // 缓存不存在时再请求接口
      const res = await fetch('/api/posts/1');
      return res.json();
    }
  });
  

  这种方式能避免重复存储相同数据，同时减少不必要的网络请求。

• 配置缓存自动回收
  通过cacheTime设置缓存的保留时长，当缓存条目长时间未被使用时，React Query会自动清理它释放内存：

  useQuery({
    queryKey: ['posts'],
    queryFn: fetchAllPosts,
    cacheTime: 300000 // 缓存5分钟后自动回收未使用的条目
  });
  

  组件卸载后，如果没有其他组件依赖该缓存，到期后就会被清理。

• 按需刷新关联缓存
  当全量帖子数据更新时，可通过invalidateQueries批量刷新相关的单条帖子缓存，保证数据一致性的同时避免无效缓存占用内存：

  queryClient.invalidateQueries({ queryKey: ['posts'] });
  

  这条命令会让所有以['posts']为前缀的缓存条目（包括['posts',1]）重新获取数据，旧缓存会被替换。

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