검색결과 데이터가 캐싱되어 다음 검색결과가 늦게 나오는 현상

프로젝트를 진행하면서 검색기능을 구현하고 있었던 오류 내용입니다. 

기존코드

const { data, isSuccess, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery(
'searchMovie',
({ pageParam = 1 }) => getSerachMovieContent({ pageParam, query }),
{
getNextPageParam: (lastPage) => {
return lastPage.page < lastPage.total_pages ? lastPage.page + 1 : null;
},
// 쿼리가 만료되면 다시 불러오도록 설정
staleTime: 0, 
// enabled를 사용하여 쿼리값이 변경될 때마다 데이터를 다시 불러오도록 설정
enabled: !!query,
}
);

 

수정된 코드

const { data, isSuccess, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery(
['searchMovie', { pageParam: 1, query }], // <-- query 매개변수를 queryKey에 추가
({ pageParam = 1 }) => getSerachMovieContent({ pageParam, query }),
{
getNextPageParam: (lastPage) => {
return lastPage.page < lastPage.total_pages ? lastPage.page + 1 : null;
},
staleTime: 0,
enabled: !!query,
}
);

 

query 매개변수를 queryKey 배열에 포함시킴으로써 query 매개변수의 변경을 데이터를 다시 불러오는 트리거를 처리했다.

요약하면 querykey를 사용하여 ReactQuery의 쿼리의 변화를 감지하고 해당하는 데이터를 새로 불러왔다