[TanStakQuery] Caching Examples

이 가이드를 읽기 전에 Important Defaults를 꼼꼼히 읽어주세요.

Basic Example

이 캐싱 예시는 캐싱의 스토리와 수명 주기를 설명합니다:

• 캐시 데이터가 있는 경우와 없는 경우의 쿼리 인스턴스
• Background Refetching
• 비활성 쿼리
• 가비지 수집

Default cacheTime 5분과 기본 staleTime 0을 사용한다고 가정해 보겠습니다.

• useQuery({ queryKey: ['todos'], queryFn: fetchTodos })의 새 인스턴스가 마운트됩니다.
  • ['todos'] 쿼리 키로 다른 쿼리가 수행되지 않았으므로 이 쿼리는 하드 로딩 상태를 표시하고 데이터를 fetching을 위해 네트워크 요청을 수행합니다.
  • 네트워크 요청이 완료되면 리턴된 데이터는 ['todos'] 키 아래에 캐시됩니다.
  • 훅은 구성된 staleTime(기본값은 0 또는 즉시)이 지나면 데이터를 stale으로 표시합니다.
• useQuery({ queryKey: ['todos'], queryFn: fetchTodos })의 두 번째 인스턴스는 다른 곳에 마운트됩니다.
  • 캐시에는 첫 번째 쿼리의 ['todos'] 키에 대한 데이터가 이미 있으므로 해당 데이터가 캐시에서 즉시 리턴됩니다.
  • 새 인스턴스는 해당 쿼리 함수를 사용하여 새 네트워크 요청을 트리거합니다.
    • 두 fetchTodos 쿼리 함수가 동일한지 여부에 관계없이 쿼리 키가 동일하기 때문에 두 쿼리의 status(isFetching, isLoading 및 기타 관련 값 포함)가 모두 업데이트된다는 점에 유의하세요.
  • 요청이 성공적으로 완료되면 ['todos'] 키 아래의 캐시 데이터가 새 데이터로 업데이트되고 두 인스턴스 모두 새 데이터로 업데이트됩니다.
• useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) 쿼리의 두 인스턴스가 모두 언마운트되어 더 이상 사용되지 않습니다.
  • 이 쿼리의 활성 인스턴스가 더 이상 없기 때문에 캐시 시간 초과는 삭제 및 가비지 수집을 위해 cacheTime을 사용하여 설정됩니다(기본값은 5분).
• 캐시 시간 제한이 완료되기 전에 useQuery({ queryKey: ['todos'], queryFn: fetchTodos })의 다른 인스턴스가 마운트됩니다. 이 쿼리는 백그라운드에서 fetchTodos 함수가 실행되는 동안 사용 가능한 캐시된 데이터를 즉시 리턴합니다. 성공적으로 완료되면 새로운 데이터로 캐시를 채웁니다.
• useQuery({ queryKey: ['todos'], queryFn: fetchTodos })의 마지막 인스턴스를 언마운트합니다.
• 5분 이내에 더 이상 useQuery({ queryKey: ['todos'], queryFn: fetchTodos })의 인스턴스가 나타나지 않습니다.
  • ['todos'] 키 아래에 캐시된 데이터가 삭제되고 가비지 수집됩니다.

Reference

• Caching Examples | TanStack Query Docs