Reactjs 如何有效地用 reactquery 缓存替换 redux like store

我正在使用useQuery获取电影列表，之前我使用redux存储这些电影，我有一个搜索功能，当我搜索时，我会在store 中查找电影.现在，我try 使用react query将其替换为电影查询的缓存结果:

    const queryClient=useQueryClient();
    let queryClientPopular=queryClient.getQueryData('Popular')?.data?.results;
    let queryClientUpcoming=queryClient.getQueryData('Upcoming')?.data?.results;
    let queryClientTopRated=queryClient.getQueryData('Top Rated')?.data?.results;
    
    const getMovieIdForPlaceholderData=(queryClientMovies,query)=>{
        return queryClientMovies?.filter(movie=>movie.original_title.toLowerCase().startsWith(query));
     }
     
     const filterMovies=(query)=>{
        let dataQuery;
        let queryClientArr=[queryClientPopular,queryClientTopRated,queryClientUpcoming];
            
        for(let i=0;i<3;i++){
            dataQuery=getMovieIdForPlaceholderData(queryClientArr[i],query)
            if(dataQuery)break;
        }
    
        
        //let arr=globalState?.movie?.filter(mov=> {return mov.original_title.toLowerCase().startsWith(query)});
        //console.log(arr);
        setFilteredMovies(dataQuery);       
    }

我有两个担忧:

1. 在我看来，这段代码看起来非常杂乱无章

2. 如果用户刷新，我将丢失查询缓存数据

有没有更好的方法来解决这些问题？还是我应该坚持我的Reduxstore ？