TIL - Tanstak Query 상태

신혜린·2024년 8월 16일

TIL

목록 보기

26/27

참고자료 |
Tanstack Query v5.0 알아보기

Vue-query를 사용하던 중, 상태값에 대한 개념 정리를 하기 위한 글

Vue Query 상태

밑의 vue-query 아이콘을 클릭하면 devtools 내에서 query key 및 상태 확인이 가능하다.

Fresh

기본적으로 서버에서 데이터를 불러오면 Fresh 상태이다. 서버로부터 불러온 데이터가 최신 상태임을 뜻하며, default는 Fresh가 아닌 상태이다.
Fresh 상태임을 나타내고 싶다면 개발자가 직접 설정할 수 있다.

또한, Fresh 상태의 지속시간을 설정해주고 싶다면 staleTime 을 설정해주면 된다.

ex) 토큰 유효기간 설정

const { data: post, error } = useQuery<IPost, Object, IPost, [_1: string, _2: string]>({
    queryKey: ["posts", id],
    queryFn: getSinglePost,
    staleTime: 60 * 1000, // 1분뒤 Stale 상태로 변경된다.
    gcTime: 300 * 1000,
  });

Stale

기회가 되면 서버에서 데이터를 가져오라는 의미이다. 여기서 기회는 3가지의 종류가 있다.

refetchOnWindowFocus: false - 다른 탭으로 이동했다가 다시 돌아오는 경우 데이터를 새로 가져온다
retryOnReconnect: true - 컴포넌트가 Unmount되었다가 Mount될 때 데이터를 새로 가져온다.
refetchOnReconnect: false - 인터넷 연결이 끊겼다가 다시 연결이 된 경우 데이터를 새로 가져온다.

Inactive

데이터가 현재 페이지에서 사용되고 있는지 여부를 확인할 수 있다.
Inactive 상태가 되면 gcTime(garbage collection)이 시작된다. gcTime에 설정된 시간이 지나고 나면 메모리에서 제거된다.

const { data: post, error } = useQuery<IPost, Object, IPost, [_1: string, _2: string]>({
    queryKey: ["posts", id],
    queryFn: getSinglePost,
    staleTime: 60 * 1000, 
    gcTime: 300 * 1000, // 5분, 기본값
  });