Tanstack Query 캐싱 매커니즘

Tanstack Query 의 캐싱 매커니즘에는 다음과 같은 단계가 있다.

Fetching → Fresh → Stale

데이터를 Fetching 하고 나면, Fresh 로 판단되며 특정 Stale Time 동안 유지되고 Stale 한 상태가 된다.

기본 Stale Time 은 0 이기 때문에

한 번 불러오고 난 데이터는 바로 Stale 한 상태가 되어 최신의 데이터를 위해서는 Refetching 을 필요로한다.

export function useTodos() {
	return useQuery({
		queryFn: fetchTodos,
		querykey: ["todos"],
		
		staleTime: 3000, // 3초간 fresh 하며 데이터를 새로 불러오지 않는다.
		
		refetchOnMount: false, // 캐시된 데이터를 사용하는 컴포넌트가 마운트 되었을 때
		refetchOnWindowFocus: false, // 사용자가 탭에 다시 들어왔을 때
		refetchOnReconnect: false, // 끊어진 인터넷 연결이 다시 연결되었을 때
		refetchInterval: false, // 특정 시간을 주기로
	})
}

만약 페이지에서 캐싱된 데이터를 사용되지않으면 inactive 상태가 된다.

이후 Garbage Collecting Time 동안 유지되고 삭제된다.

stale 되었건 staleTime 이 있어서 fresh 되건 (staleTime 이 gcTime 보다 아무리길어도)

inactive 상태가 되면 gcTime 에 영향을 받는다.

stale 된 캐싱 데이터는 5분의 gcTime 동안 유효하게 된다.

실무적으로 개발 시점에는 staleTime 은 두지않고 (최적화해두지 않고) 사용하는 것이 좋다.