React Query 캐시 초기화 후 다시 받아오기

react query, tanstack query

자주 사용될 일은 없지만, 꼭 써먹어야하는 순간이 있기 때문에 기록용으로 남기는 게시물입니다.

(react query, tanstack query)

 

웹 사이트에 사용된 ReactQuery의 모든 API 캐시를 날려버리고 다시 받아와야 하는 경우가 있었습니다.

버튼 클릭시 A 테이블을 사용한 API 수십개를 B 테이블을 사용한 API 로 교체해야하는 그런 경우였습니다.

 

Local Storage 를 사용하여 값이 true 면 A API, false 면 B API 를 사용하도록 제어 하였는데

문제는 React Query의 응답값 캐시였습니다.

이 캐시를 몽땅 비워주고 다시 API 호출할 수 있도록

queryClient.invalidateQueries() 함수를 사용하였고,

옵션으로 refetchInactive: true 를 넣어서 현재 inactive 한 상태에 있는 캐시들도 비우고 다시 호출되게끔 해주었습니다. 

 

import { useQueryClient } from 'react-query'

const NewAssetTableMenu = () => {
  const queryClient = useQueryClient()
  function handleRefresh() {
    queryClient.invalidateQueries({ refetchInactive: true })
  }
  
  return (
    <div onClick={() => { handleRefresh() }}>리셋</div>
  )
}