TanStack Query v5：利用缓存数据筛选的最优方案探讨

一、当前复用缓存的写法完全可行且高效 #

你通过useMovieByCategory调用useMovies的方式，完全满足复用缓存、避免重复请求的需求，核心原因：

• React Query的缓存基于queryKey生效，只要多个useQuery调用的queryKey一致（此处均为['movies']），就会共享同一份缓存数据。
• 不管是ComponentA直接调用useMovies，还是ComponentB通过useMovieByCategory间接调用useMovies，只要缓存未失效，只会发起一次网络请求，后续所有调用都直接读取内存缓存，筛选逻辑在客户端本地完成，不会产生额外请求。

这种写法的优势是逻辑拆分清晰：将数据获取的核心逻辑封装在useMovies中，各类筛选逻辑可基于它扩展，复用性强。

二、关于select选项的误解：它不会触发额外请求 #

你之前认为useQuery的select会再次发起请求，这是错误的——select仅对已有缓存数据做客户端转换，完全不会触发新的网络请求。

select是React Query提供的数据转换钩子，作用是在缓存数据返回给组件前，对数据做同步处理（如筛选、映射、格式化），本质是客户端内存操作，与请求本身无关。

用select实现分类筛选的示例 #

如果想用select实现相同需求，代码可写成：

// useMovie.js
export const useMovieByCategory = (category: string) => {
  return useQuery({
    queryKey: ['movies'],
    queryFn: getMovies,
    select: (data) => data?.movies?.filter((m) => m.category === category)
  })
}

该写法和你当前的实现效果完全一致：共享['movies']缓存，无重复请求，最终拿到筛选后的数据。

三、两种写法的适用场景 #

• 你的当前写法：适合存在多种数据转换/筛选需求的场景（比如还要按评分、上映时间筛选），抽离基础数据获取逻辑后，各类筛选hook可复用同一份缓存，代码结构更清晰。
• 使用select的写法：适合单个、简单的数据转换需求，写法更简洁，直接在useQuery配置中完成数据处理，组件可直接拿到最终所需数据。

内容的提问来源于stack exchange，提问作者Téwa