캐싱 예시

이 가이드를 읽기 전에 중요한 기본값을 자세히 읽어보세요

기본 예제

이 캐싱 예제는 다음 항목의 과정과 수명 주기를 보여줍니다:

• 캐시 데이터가 있거나 없는 쿼리 인스턴스
• 백그라운드에서 다시 가져오기
• 비활성 쿼리
• 가비지 컬렉션

기본 gcTime인 5분과 기본 staleTime인 0을 사용한다고 가정합니다.

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