Stale이란 "신선하지 않은" 이라는 뜻을 가지고 있다.
기존에 조회한 데이터에서 데이터가 변경 되었을경우나, 데이터가 저장된(캐싱된) 상태에서 리액트 쿼리는 내가 가진 데이터는 신선하지 않은 데이터 !! 라고 인식한다. 또한 Stale은 "신선하지않아서 최신화가 필요한 데이터" 라는 의미로도 해석할 수 있다.
useQuery가 stale하다 는 캐싱되어있는 data를 stale한 (신선하지않은,오래된) 상태로 여긴다.
리액트 쿼리 문서에서는 오래된 쿼리는 다음과 같은 경우에 백그라운드에서 자동으로 다시 가져온다고 한다.
- 쿼리의 새 인스턴스가 마운트 되는 경우
- 창이 다시 포커싱 된 경우
- 네트워크가 다시 연결된 경우
- 쿼리가 선택적으로 새로 고침 간격으로 구성된 경우
- 예상치 못한 리페치가 표시되는경우
이를 위해 해줄수있는 방법은
- staleTime
- cacheTime
을 사용해줄 수 있다.
☝🏻 staleTime
staleTime은 언제까지 신선한 데이터를 써라 ! 라고 명시해준다고 생각하면 될거같다.
그래서 내가 staleTime을 설정해주어 그 시간동안에는 리액트쿼리는 캐시된(신선한) 데이터라고 간주되어 refetch 되지않고 쓸 수 있다.
const {
data: products,
error,
isLoading,
} = useQuery(["products", checked], async () => {
return fetch(`data/${checked ? "sale_" : ""}products.json`)
.then((res) => res.json()
);
},
{
staleTime: 5000, // 1
}
);
- 세번째 인자인 옵션 부분에 staleTime을 적용해줄수있다. 위에 코드에서는 5초를 설정해주었다. 그럼 쿼리는 5초가 지나면 stale한 상태로 바뀌게 된다.
5초 동안에는 아무리 클릭해도 fetch가 되지않다가 내가 설정해준 시간(5초)가 지나면 클릭할때마다 fetching이 증가하게 된다.
☝🏻 cacheTime
cacheTime은 데이터가 inactive한 상태일때 즉 활동을 안하고있을때 저장(캐싱)되어 남아있는 시간을 설정해주는 것이다.
cacheTime을 설정한 시간만큼 쿼리는 유지된다.
리액트 쿼리에서 cacheTime은 default로 5분으로 설정되어있다.
const {
data: products,
error,
isLoading,
} = useQuery(["products", checked], async () => {
return fetch(`data/${checked ? "sale_" : ""}products.json`)
.then((res) => res.json()
);
},
{
cacheTime: infinity, // 1
}
);
내가 추론해본 staleTime과 cacheTime의 차이점을 말하자면
- staleTime 은 언제까지 신선한 데이터라고 생각하고 그 시간동안 써라 !! 라고해서 fresh한 상태에서 stale할때 까지의 시간을 명시해주는 것같고
- cacheTime은 데이터가 활동성이 없을때 즉 저장(캐싱)된 상태로 남아있는 시간 을 정해줘서 그 시간동안 남아있다가 가비지 콜렉터, 즉 폐기처분? 하게 되는 차이점이 있다고 생각한다.
staleQuery는 캐시(저장)되어 있기 때문에 UI로 바로 보여주긴 하지만 오래된 상태라고 생각되어 백그라운드에서 네트워크요청을 받아와서 업데이트가 이루어진다.
다시 fatch되는걸 막기위해 직접 staleTime 으로 시간설정 해주는 방법이 있고
만약 윈도우나 focus가 되었을때 refetch가 되는 행동을 바꾸고 싶다면 refetchOnWindowFocus를 false로 설정해준다.
또한 컴포넌트가 마운트 되었을때 stale된 쿼리가 다시 패치되는걸 방지 하려면 refetchOnMount 옵션을 false라고 설정해주면 된다.
