TanStack-query v5：使用缓存数据进行过滤的最佳方法

Question

1. 已从服务器获取数据。
2. 我想重复使用数据而不再次获取。
3. 请注意，在

   useMovieByCategory()

   中，我调用

   useMovies()

   来“重用”缓存的数据。我想知道这是否是一个正确的方法和有效的方法。
4. 在

   select

   内部使用

   useQuery

   将再次进行获取。所以这不是我想要的，因为我只需要过滤数据。
5. 你觉得怎么样？

// useMovie.js

// fetch
export const useMovies = () => {
  return useQuery({
    queryKey: ['movies'],
    queryFn: () => getMovies(),  // fetch movie data
  })
}

// filter
export const useMovieByCategory = (category: string) => {
  const {data} = useMovies();

  return data?.movies?.filter((m) => m.category === category);
}

然后我在我的应用程序中使用它们

// componentA
const {data} = useMovies();

{data.map(() => ...)} // display movie list

// componentB
const {data} = useMovieByCategory();

{data.map(() => ...)} // display filtered movie list

Answer 1

使用

select

不会触发重新获取。安装

useQuery

的新实例会触发重新获取，如果您想避免重新获取，可以将 staleTime 设置得更高。你可以这样做

    export const useTodos = (select) => {
      return useQuery({
        queryKey: ['todos'],
        queryFn: fetchTodos,
        select,
        staleTime: Infinity
      })
    }
    
    export const useTodoCount = () => {
      return useTodos((data) => data.length)
    }

如果这对您来说不方便，您可以随时使用

getQueryData

功能，但不建议这样做，因为它不会创建订阅。

    const data = queryClient.getQueryData(queryKey)
    const filteredData = data?.filter(...)

我的建议是，将 staleTime 设置为 5 秒左右。或者你可以尝试：

    export const useTodos = (select) => {
      return useQuery({
        queryKey: ['todos'],
        queryFn: fetchTodos,
        select,
        refetchOnMount: false
      })
    }
    
    export const useTodoCount = () => {
      return useTodos((data) => data.length)
    }

无论数据是否过时，这都会阻止重新获取。