React-query removeQueries

검색결과 페이지에서 

헤더에 있는 지역 검색을 하면

제목은 바뀌는데 

 데이터가 늦게 들어와서  목록이 바뀌지 않는 문제가 발생됬다.  (잘되다가 간혈적으로 안됨)

 

 

이러한 현상은  많은 데이터를 불러오는 지역에서 더 많이 발생됬는데 

추측하기로는 너무 많은 데이터를 요청해서  문제가 있나 싶었다. 

 

만약 내가 사용자라면 검색 버튼을 눌렀을때 검색 결과가 바뀌지 않는다면 이상하다고 생각했을 것이다.

그래서 우리 팀원분중 한분이 생각 한게 

removeQueries() 를 사용 하자는 것이 였다. 

removeQueries() 이 뭐냐면 

 

기존 캐시값을 지워버리고 새롭게 데이터를 받아 온다 이렇게 생각하면 쉬울것이다. 

그래서 데이터 요청시  새로운 캐시값을 만들어야 하기 때무네 ->  isLoading 이 활성화 됨 

 

 // SearchPage.tsx 
 
 useEffect(() => {
    queryClient.removeQueries('station');
    refetch();
    setPage(0);
  }, [z2]);
  
 
 // z2 state 가 변경될 때 마다 useEffect() 가 실행됨

 

 

결과