[Tanstack Query] 계정이 바뀌면 캐시된 기존 데이터 지우기

📍목표

- tanstack query(react-query, vue-query) 의 캐시된 데이터 전부 초기화하는 방법 알아보기

- A계정으로 데이터 페칭 후, 로그아웃. B계정으로 새로 접속 시 A계정으로 불러온 데이터 제거하기

 

📍현재 상황

- vue-query의 useQuery를 사용해서 데이터 페칭 후 캐싱

- 로그인 페이지에서 useQueryClient() 를 이용해 queryClient 인스턴스를 선언

- Nuxt의 $fetch로 로그인 요청

- 로그인 요청이 성공(access token 및 refresh token이 반환됨)하면 queryClient.clear() 를 사용해서 모든 캐시 데이터 제거 시도

=> 하지만, 캐시가 제거되지 않음

 

📍시도한 방법

queryClient.clear() 대신

- queryClient().invalidateQueries()

- queryClient().removeQueries()

 

📍해결 방법

로그인 비동기 요청도 vue-query를 이용하게 수정

- 로그인 로직을 $fetch -> useMutation 로 변경

- 그리고 useMutation의 onSuccess 콜백함수에서 queryClient.clear() 실행