알듯 말듯 헷갈리는 StaleTime & CacheTime

Stale

• [신선하지 않는] 사전적 의미
• Stale Data는 최신화가 필요한 데이터라는 의미 (= fresh하지 않은 상태)
• Stale한 상태가 되면 아래의 경우에 refetch 된다
  - 새로운 쿼리 인스턴스 마운트
  • 윈도우 탭 포커싱 (refetchOnWindowFocus)
  • 네트워크 다시 연결될 때 (refetchOnReconnect)
  • 특별히 설정한 refetch interval에 의해 (refetchInterval)

Stale Time

• 기본값 0ms
• 데이터가 fresh -> stale 상태로 변경되는데 걸리는 시간
• fresh상태일때 쿼리 인스턴스가 새롭게 마운트 되어도 네트워크 fetch가 일어나지 않는다
• Stale Time이 지나기 전까지(= fresh한 상태)는 데이터를 다시 호출하지 않는다

Stale Time을 지정해주지 않고 쓴다면, react-query의 캐싱 기능을 제대로 활용할 수 없다

• 기본값이 0ms인 Stale Time을 따로 지정해주지 않는다면, 항상 캐싱되어 있는 데이터가 Stale한 상태로 여기기 때문에 서버에 계속적인 요청을 하게 된다

enabled를 설정하여 retry 호출을 막자

• enabled:false로 설정할 경우, 초기 마운트 시 최초 호출하고 retry행위를 차단할 수 있다
• enabled: fasle는 useQuery의 기능을 사용하지 않겠다는 의미이기 때문에 수동적으로 호출하는 방식이 필요하다. useQuery함수의 refetch함수로 수동적으로 호출 가능하다

refetch 함수의 개념

• 캐싱 결과를 조회하지 않고 무시한 채로 그냥 API요청을 날리는 메서드이다
• 즉, QueryClient 옵션을 무시하고 refetch를 진행한다
• 캐싱을 구현하려면 enabled옵션을 false로 두면 안된다
• refetch를 쓰지 않고, enabled true인 상태와 캐싱 둘다 구현하려면???

{
  enabled: !!user.name
}

enabled 조건이 충족될 때만 API호출할 수 있게 한다

Cache Time

• 데이터가 Inactive 상태일 때 캐싱된 상태로 남아있는 시간
• 쿼리 인스턴스가 unmount되면 데이터는 inactive상태로 변경되며, 캐시는 Cache Time만큼 유진된다
• Cache Time이 지나면 Garbage Collector로 수집된다
• Cache Time이 지나기 전에 쿼리 인스턴스가 다시 마운트 되면, 캐시 데이터를 보여준다
• Cache Time은 Stale Time과 관계없이, 무조건 Inactive된 시점을 기준으로 캐시 데이터 삭제를 결정한다

React Query 라이프사이클

React Query의 라이프 사이클

1. A 쿼리 인스턴스가 mount 됨
2. 네트워크에서 데이터 fetch하고 A라는 query key로 캐싱
3. fresh상태에서 staleTime(기본값 0) 이후 stale 상태로 변경
4. A쿼리 인스턴스가 unmount됨
5. 캐시는 cacheTime(기본값 5min) 만큼 유지되다가 가비지 콜렉터로 수집됨
6. 만일 cacheTime이 지나기 전에 A쿼리 인스턴스가 새롭게 mount되면, fetch가 실행되고 fresh한 값을 가져오기전에 캐시 데이터를 보여줌

Practice 🚀

1. 기본설정일 경우

• StaleTime = 0m
• CacheTime = 5m

• 쿼리가 호출되고 API요청을 하고 데이터를 캐싱한다. staleTime에 의해서 곧바로 stale 상태로 변경된다

• 1분 뒤 같은 쿼리를 호출해보자. 쿼리는 우선 캐시가 유효한지 확인한다. 캐시는 5분간 유효하므로 사용할 수 있다
• 하지만 staleTime이 0이므로 데이터는 stale상태. 따라서 API를 재요청
• 응답값은 캐시를 업데이트 한다

<정리>
기본 설정일 경우, 데이터의 상태는 곧바로 stale상태가 되므로, 쿼리를 요청할 때마다 API요청을 한다

StaleTime = 5m , CacheTime = 5m 일때

• 처음 API호출
• 1분 뒤 같은 쿼리를 호출해보자. 캐시는 5분 동안 유효하므로 사용가능. staleTime은 5분이므로 데이터는 fresh한 상태. 따라서 캐시된 데이터를 사용하고 API요청은 하지 않는다
• 30분 뒤, 캐시 데이터도 유효하지 않고, 데이터도 stale한 상태이므로 API요청을 하고 데이터를 새롭게 캐싱한다

StaleTime = 5m , CacheTime = 0m 일때

• 처음 API호출
• 1분 뒤 같은 쿼리를 호출해보자. 데이터는 fresh상태이므로 API를 재요청하지 않고 캐시된 데이터를 그대로 사용
• 30분 뒤, 데이터는 stale한 상태이므로 API 재요청

Question

1. StaleTime은 어떤 케이스에서 0이 아닌 값으로 쓸까?
   => 음... 검색해도 잘 나오지는 않음
2. 기본값인 StatleTime = 0m, CacheTime = 5m이라면 계속해서 API 요청을 하는데 React query를 쓰는 이유가 있을까?
   => 초기에는 React Query는 API 요청 횟수를 줄이는 기능으로 이해했지만, 사실상 그건 아니다.
   React Query는 API호출에 대한 데이터 캐싱, 통신 상태와 같은 상태처리를 돕는 라이브러리다.

---

참고
1. https://velog.io/@jay/5-minute-react-query-essential
2. https://2ham-s.tistory.com/407
3. https://ttaerrim.tistory.com/53

stale & cache동작원리에 대한 글인데 참고하면 좋다
https://www.timegambit.com/blog/digging/react-query/03