React Query - 2 (stale data)

HSKwon·2023년 4월 27일
0
post-thumbnail

useQuery, useInfiniteQuery는 기본적으로 캐시된 데이터를 오래된 데이터 (stale data)로 간주한다.

다만, 리액트 쿼리에서는 캐시된 데이터의 stale time을 조정할 수 있는 옵션을 기본으로 제공해주기 때문에 각 쿼리당 데이터를 refetch하는 시간 간격을 조정할 수 있다! (1000 60 5 ms 가 아닌 다른값으로 변경 가능)

오래된 쿼리는 아래와 같은 경우 백그라운드에서 자동으로 다시 가져온다.

  • 쿼리의 새 인스턴스가 마운트될 때
  • window가 다시 포커스 될 때
  • 쿼리의 refetch interval이 설정되어 있을 때

또한, 리액트쿼리에서 기본으로 제공해주는 옵션인 refetchOnMount, refetchOnWindowFocus, refetchInterval 등의 옵션을 사용하여 인터벌을 설정할 수 있다.

useQuery, useInfiniteQuery의 활성 인스턴스가 더 이상 없을경우 inactive로 지정된다. 다만, 나중에 쿼리 데이터를 다시 사용할 경우를 대비하여 캐시에 남아있게 된다.

기본적으로 inactive 쿼리는 5분 뒤에 가비지 콜렉팅 된다.

또한, 리액트쿼리는 똑똑하게도 실패한 쿼리를 캡쳐하여 UI에 에러를 표시하기 전에 자동으로 3회에 걸쳐 재시도한다.

profile
공부한 내용이나 관심 있는 정보를 글로 정리하며 익숙하게 만들고자 합니다.

0개의 댓글