이 가이드를 읽기 전에 Important Defaults를 꼭 읽어보세요.

기본 예제

이 캐싱 예제는 라이프 사이클과 밑의 특징들을 보여줍니다:

• 캐시 데이터가 있는 쿼리 인스턴스와 캐시 데이터가 없는 쿼리 인스턴스
• 백그라운드 리패칭
• 비활성 쿼리
• 가비지 컬렉션

기본 gcTime이 5분이고 기본 staleTime이 0이라고 가정해 봅시다.

• useQuery({ queryKey: ['todos'], queryFn: fetchTodos })의 새 인스턴스가 마운트됩니다.
  • ['todos'] 쿼리 키로 다른 쿼리가 실행된 적이 없으므로, 이 쿼리는 하드 로딩 상태를 표시하고 데이터를 가져오기 위해 네트워크 요청을 합니다.
  • 네트워크 요청이 완료되면 반환된 데이터가 ['todos'] 키 하에 캐시됩니다.
  • 후속 구성된 staleTime (기본값은 0, 즉 즉시) 이후에 훅은 데이터를 fresh하지 않은 상태로 표시합니다.
• 두 번째 인스턴스인 useQuery({ queryKey: ['todos'], queryFn: fetchTodos })가 다른 곳에서 마운트됩니다.
  • 첫 번째 쿼리에서 ['todos'] 키로 캐시에 이미 데이터가 있으므로, 그 데이터가 캐시에서 즉시 반환됩니다.
  • 새로운 인스턴스가 쿼리 함수를 사용하여 새로운 네트워크 요청을 트리거합니다.
    • 두 fetchTodos 쿼리 함수가 동일하든 다르든 관계없이, 두 쿼리의 status (포함된 isFetching, isPending, 기타 관련 값들)는 동일한 쿼리 키를 가지므로 업데이트됩니다.
  • 요청이 성공적으로 완료되면, 캐시의 ['todos'] 키 데이터가 새 데이터로 업데이트되고, 두 인스턴스 모두 새 데이터로 업데이트됩니다.
• 두 개의 useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) 인스턴스가 언마운트되고 더 이상 사용되지 않습니다.
  • 이 쿼리의 활성 인스턴스가 없으므로, gcTime을 사용하여 쿼리를 삭제하고 가비지 컬렉션할 타임아웃(기본값은 5분)이 설정됩니다.
• 캐시 타임아웃이 완료되기 전에, 또 다른 인스턴스인 useQuery({ queryKey: ['todos'], queryFn: fetchTodos })가 마운트됩니다. 쿼리는 fetchTodos 함수가 백그라운드에서 실행되는 동안 즉시 사용 가능한 캐시된 데이터를 반환합니다. 함수가 성공적으로 완료되면 캐시가 새 데이터로 채워집니다.
• 최종 인스턴스인 useQuery({ queryKey: ['todos'], queryFn: fetchTodos })가 언마운트됩니다.
• 5분 이내에 useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) 인스턴스가 더 이상 나타나지 않습니다.
  • ['todos'] 키 하에 있는 캐시된 데이터가 삭제되고 가비지 컬렉션에 의해 삭제됩니다.