🔥 캐싱

이 가이드를 읽기 전에 반드시 중요한 기본값을 꼼꼼히 읽어보시길 바랍니다.

기본 예제

이 캐싱 예제는 다음 사항들에 대한 내용과 생명주기를 설명합니다:

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

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

• useQuery({ queryKey: ['todos'], queryFn: fetchTodos })의 새로운 인스턴스가 마운트됩니다.
  • ['todos'] 쿼리 키로 만들어진 다른 쿼리가 없기 때문에, 이 쿼리는 하드 로딩 상태를 표시하고 데이터를 가져오기 위해 네트워크 요청을 합니다.
  • 네트워크 요청이 완료되면, 반환된 데이터는 ['todos'] 키 아래에 캐시됩니다.
  • 이 훅은 설정된 staleTime(기본값은 0 또는 즉시) 이후에 데이터를 stale로 표시합니다.
• useQuery({ queryKey: ['todos'], queryFn: fetchTodos })의 두 번째 인스턴스가 다른 곳에서 마운트됩니다.
  • 캐시에 첫 번째 쿼리로부터 ['todos'] 키에 대한 데이터가 이미 있기 때문에, 해당 데이터는 캐시에서 즉시 반환됩니다.
  • 새로운 인스턴스는 해당 쿼리 함수를 사용하여 새로운 네트워크 요청을 트리거합니다.
    • fetchTodos 쿼리 함수가 동일한지 여부와 상관없이, 두 쿼리 모두 동일한 쿼리 키를 가지고 있기 때문에 상태(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'] 키 아래에 캐시된 데이터가 삭제되고 가비지 컬렉션됩니다.