Caching Examples

본 가이드를 읽기 전에 Importatn Defaults를 자세히 읽어보기를 바란다.

Basic Example

이 캐싱 예제는 다음 스토리와 라이프사이클을 보여준다 :

• 캐시 데이터가 있거나 없는 Query 인스턴스
• Background Refetching
• Inactive Queries
• Garbage Collection

기본 cacheTime 5분과 기본 staleTime 0을 사용한다고 가정하자.

• 새로운 useQuery(['todos'], fetchTodos)의 인스턴스가 mount된다.

  • ['todos'] 쿼리 키로 다른 쿼리가 만들어지지 않았기 때문에, 이 쿼리는 hard loading state를 표시하고 데이터를 fetch하기 위해 네트워크 요청을 수행한다.
  • 네트워크 요청이 완료되면, 반환된 데이터는 ['todos'] 키 아래에 캐시된다.
  • 설정된 staleTime(기본은 0, 또는 즉시) 후 hook가 데이터를 stale로 표시한다.

• useQuery(['todos'], fetchTodos)의 두번째 인스턴스는 다른곳에 mount된다.

  • 캐시에 이미 첫번째 쿼리의 ['todos'] 키에 대한 데이터가 있으므로, 해당 데이터는 즉시 캐시에서 반환된다.
  • 새 인스턴스는 쿼리 함수를 사용하여 새 네트워크 요청을 트리거한다.
    • 두 개의 fetchTodos 쿼리 함수가 동일한지 여부에 관계없이 동일한 쿼리 키를 가지므로 두 쿼리의 status는 모두 업데이트된다.(isFetching, isLoading 및 기타 관련 값 포함)
  • 요청이 성공적으로 완료되면, ['todos'] 키 아래의 캐시된 데이터가 새 데이터로 업데이트되고, 두 인스턴스 모두 새 데이터로 업데이트된다.

• useQuery(['todos'], fetchTodos) 쿼리의 두 인스턴스가 모두 unmount되어 더이상 사용되지 않는다.

  • 이 쿼리의 active 인스턴스가 더 이상 없으므로, 쿼리를 삭제하고 garbage collect하기 위해 cacheTime을 이용하여 캐시 timeout이 설정된다.(기본값은 5분)

• 캐시 timeout이 완료되기 전에, useQuery(['todos'], fetchTodos)의 다른 인스턴스가 mount된다. 이 쿼리는 fetchTodos 함수가 백그라운드에서 실행되는 동안 사용가능한 캐시된 데이터를 즉시 반환한다. 성공적으로 완료되면, 캐시를 새 데이터로 채운다.

• useQuery(['todos'], fetchTodos)의 마지막 인스턴스가 unmount된다.

• useQuery(['todos'], fetchTodos)의 인스턴스가 5분 이내에 나타나지 않는다.

  • ['todos'] 키 아래의 캐시된 데이터가 삭제되고 garbage collect된다.