React DevTools

브라우저 환경에서 데이터(상태)가 어떻게 관리되고 있는지 확인할 수 있는 툴

• yarn add @tanstack/react-query-devtools 명령어로 설치

사용방법

ReactQueryDevTools로 App 컴포넌트를 감싸준다

Life Cycle

TanStack Query의 생명주기는 데이터가 캐시되고, 사용되고, 갱신되는 과정을 포함한다

상태

• fresh - 데이터를 새로 패칭할 필요가 없는 상태
  staleTime이 지나지 않은 상태로 캐시 데이터를 그대로 사용할 수 있다
  ❗️staleTime - 얼마의 시간이 흐른뒤에 stale 취급 할 건지 (default : 0)
• stale - 데이터를 새로 패칭해야 하는 상태
  staleTime이 지난 후로, 새로운 데이터를 가져오기 위해 쿼리가 실행된다
• active - 현재 컴포넌트에서 사용 중인 쿼리 상태
  컴포넌트가 마운트되어 쿼리를 사용하고 있을 때를 말한다
• inactive - 더 이상 사용되지 않는 쿼리 상태
  컴포넌트가 언마운트되거나 쿼리가 더 이상 필요하지 않을때를 말한다
• deleted - 캐시에서 제거된 쿼리 상태
  gcTime이 지나면 쿼리가 캐시에서 삭제된다
  ❗️gcTime - inactive된 이후로 메모리에 얼마만큼 있을건지 (default : 5분)
• fetching - 데이터를 서버에서 가져오고 있는 상태, 이 상태에서는 isFetching이 true로 설정된다

default config 설정

staleTime

default : 0

useQuery 또는 useInfiniteQuery에 등록된 queryFn을 통해 fetch받아온 데이터는
항상 stale data 취급

refetchOnMount

default : true

useQuery 또는 useInfiniteQuery가 있는 컴포넌트가 마운트시 stale data를 refetch 자동 실행

refetchOnWindowFocus

default : true

실행중인 브라우저 화면을 focus 할 때 마다 stale data를 refetch 자동 실행

refetchOnReconnect

default : true

네트워크가 끊겼다가 재연결 되었을때 stale data를 refetch 자동 실행

gcTime

default : 5분

useQuery 또는 useInfiniteQuery가 있는 컴포넌트가 언마운트 되었을때 inactive query라 부르며, inactive 상태가 5분이 지나면 가비지 콜렉터에 의해 cache data 삭제

retry

default : 3

useQuery 또는 useInfiniteQuery에 등록된 queryFn이 API서버에 요청을 보내서 실패하더라도 바로 에러를 띄우지 않고 총 3번까지 재요청을 자동으로 시도