📚 Reference

• 공식 문서 1

📜 Chapter

QueryClient

useQuery

Cache

• Cache
• 캐싱
• Query가 queryKey 기준으로 저장해두는 실제 쿼리 결과 저장소
• queryKey 기준으로 서버 데이터를 저장하고 재사용하는 저장소
• TanStack Query 자체 저장소이다.
• 같은 queryKey로 useQuery가 다시 마운트되면, cache에 데이터가 있으면 그 데이터를 즉시 반환하고, 그 뒤 백그라운드에서 다시 fetch할 수 있다. fetched data는 staleTime 이후 stale로 표시되고, 활성 구독이 없어지면 gcTime 이후 garbage collection 대상이 된다.
• cache는 query 결과 재사용, 중복 요청 감소, 화면 복귀 시 빠른 복원을 담당한다.
• 같은 queryKey로 돌아왔을 때 자동 재사용되는 기본 메커니즘

캐시 저장 위치

• 기본 TanStack Query 캐시는 브라우저 메모리 (JavaScript heap) 에 있음
• TanStack Query의 cache는 QueryClient 내부의 in-memory store (JS 객체)
• queryClient 내부에 있는 QueryCache라는 객체 내의 JavaScript Map 객체에 데이터가 보관된다.

브라우저
 └── JS Memory (Heap)
      └── QueryClient
            └── QueryCache
                  └── queryKey → data