1. There is fetched data from server.
2. I want to reuse the data without fetching again.
3. Note that in the useMovieByCategory(), I call useMovies() to “reuse” the cached data. I wonder if it’s a right approach and efficient way.
4. using select inside of useQuery will make fetch again. So this is not a desired since I just need to filter data.
5. What do you think?

// 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);
}

Then I use them across my app

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

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

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

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