1. stale data
- 데이터의 사용 기간이 지났고, 다시 가져올 준비가(refetch) 되 있는 상태입니다
- 여전히 데이터는 캐시 안에 있습니다
- 데이터를 다시 검증해야 한다는 뜻
- 데이터 새로 고침(refetch) 은 오래된 데이터( stale data )에 대해서만 트리거됩니다
- 자동으로 데이터 새로 고침을 하는 트리거는 컴포넌트 remount 나 브라우져 창의 refocus가 있습니다
- staleTime 은 데이터의 최대 수명이라고 생각하면 됩니다
- 그러므로 데이터 새로고침 기능을 컨트롤하고 싶다면 이와 관련된 useQuery 의 옵션 중 하나인 staleTime 을
조절하면 됩니다
(staleTime 이 2초 (2000 ms) 라면 2초 동안에는 데이터 새로 고침이 되지 않습니다 - staleTime 은 default 로 0ms 이기 때문에 추가로 조절을 하지 않으면 오토 refetch 트리거가 발동되면서
항상 데이터 새로고침을 하게 됩니다
const { data, isLoading, isError, error } = useQuery({
queryKey: ["posts"],
queryFn: fetchPosts,
staleTime: 1000 * 2,
});
위 코드처럼 staleTime 옵션 값을 주게 되면 아래 그림처럼 데이터의 상태가
Fresh -> Stale 로 변하는 모습을 확인할 수 있습니다.
staleTime 옵션을 별도로 주지 않으면 staleTime : 0 이 기본값이므로 새로 불러온 데이터는 바로 stale 상태가 됩니다.
2. gcTime
- useQuery 가 비활성화 상태이고, 데이터가 현재 페이지에 표시되지 않으면 쿼리는 cold storage 상태로 들어갑니다
- 쿼리가 캐시에는 있으나 사용되지 않는 유효기간이 정해진 상태입니다.
- 캐시 데이터는 gcTime 이후 사라집니다. (기본값 : 5분)
- 데이터가 페이지에 표시된 이후부터 시간이 측정됩니다.
( 정확히는 데이터가 추가로 사용되지 않으면)
- 데이터가 페이지에 표시된 이후부터 시간이 측정됩니다.
- gc 처리된 데이터는 리액트 쿼리에서 더이상 사용할 수 없습니다
3. staleTime VS gcTime ( garbage collect Time )
staleTime : 데이터를 다시 가져와야 할 때를 알려준다
gcTime : 나중에 재사용할 수 있는 데이터의 캐시 보관 기간
3-1) staleTime 와 gcTime 에 따른 작동 방법
- data 상태가 Fresh , 캐시에 데이터가 있을 때
캐시 데이터를 보여주고 refetch 는 일어나지 않습니다 - data 상태가 Stale, 캐시에 데이터가 있을 때
먼저 캐시 데이터를 보여주고 refetch 후, 새로운 데이터를 보여줍니다 - 캐시에 데이터가 없을 때
refetch 하는 동안, 화면에는 아무 데이터도 보여주지 않습니다.
로딩 바나 스피너 가 있다면 화면에 이것들이 보이게 될겁니다.
3-2) 그러므로 gcTime 을 설정할 때는 항상 staleTime 이상의 값으로 설정 해줘야 합니다
캐시 데이터가 없으면 데이터가 없는 빈 화면을 노출하게 되어 사용자 경험이 떨어지게 됩니다
