tanstak query의 staleTime과 gcTime 차이

staleTime

데이터가 오래됐다. 유효기간이 만료됐다. 데이터는 여전히 캐시에 있다. 그저 데이터를 다시 검증해야한다는 뜻이다. 

 

데이터 prefetch는 데이터가 stale일 때만 트리거된다. (쿼리 포함하는 컴포넌트 다시 마운트되거나 브라우저 창이 리포커싱될 때)

stale 시간을 데이터의 최대 수명으로 생각하면된다. (서버로부터 가장 신선한 데이터 버전을 가져오기 전에 데이터를 살려둘 건지)

 

- useQuery 옵션에서 stale 시간 조정 가능

const { data, isError, error, isLoading } = useQuery({

    queryKey: ["posts"],

    queryFn: fetchPosts,

    staleTime: 2000,

  });

 

데이터가 stale이어야 refetch 트리거가 서버에서 데이터를 가져온다. 

 

 

gcTime(garbageCollection)

데이터와 연관된 활성 useQuery가 없고 데이터가 현재 페이지에 표시되지 않으면 cool storage 상태로 들어가는데, 쿼리가 캐시에 있으나 사용되지는 않고 유효기간이 정해져 있는거다. 그 유효기간이 gcTime인거다.

 

gcTime이 지나면 데이터는 캐시에서 사라진다. 

기본 gcTime은 5분이다. 데이터가 페이지에 표시된 후부터 시간이 측정된다. 

 

gcTime이 지나면 데이터는 garbage collected되고, 리액트 쿼리에서 더 이상 사용할 수 없게 된다. 

 

• Fresh & in cache => 캐시된 데이터가 화면에 보여지고 refetch되지 않는다. 

 

• Stale & in cache => 캐시된 데이터가 화면에 보여지고 refetch된다. 

 

• not in cache => refetch되는 동안 화면에 보여지는 게 없다. 서버에서 데이터를 가져올 때까지 쿼리는 어떤 데이터도 반환하지 않는다. 

---

정리 👉 staleTime은 데이터를 다시 가져와야할 때를 알려주고, gcTime은 데이터를 캐시에 유지할 시간을 결정한다.