[React Query] 캐싱은 탭 간 공유되지 않는다

Alledy 2022. 2. 15. 22:07

react query의 캐시는 in memory라서 브라우저 탭 간에 공유되지도 않고 새로고침할 때마다 새롭게 생성된다. (The cache is in-memory and only exists within the life of the javascript context for a tab.)
in memory라는 단어의 사용은 솔직히 헷갈린다. 보통 인메모리 캐싱은 하드디스크 말고 메모리에 캐시를 저장하는 걸 의미하는데, 여기서의 맥락은 그런 in memory가 아닌 것 같고 그저 자바스크립트가 실행되고 있는 동안에 가지고 있는 상태라는 의미인 것 같다. (localStorage 처럼 지속 저장하는 형태가 아니라는 뜻)
리액트 쿼리에서 탭 간에 캐시가 공유되지 않다보니, invalidateQueries를 했을 때 다른 window나 tab에도 refetch되게 하고 싶으면 refetchOnWindowFocus 같은 옵션이 true여야 하는 것 같다. config에서 디폴트를 false로 지정해줬더니 이 부분을 놓칠 뻔 하여 남겨둠.