[React Query] stale/cache time

React Query에서 캐싱 기능을 제대로 사용하기 위해 stale time, cache time 등에 대해 잘 알고 있어야 한다. 몇 번을 봤지만 자주 잊어버리기에 간단히 정리해 보고자 한다.

 

 

Cache?

 

React Query는 설정한 cacheTime 만큼 데이터를 메모리에 저장해 놓는다. React Query에서의 cache는 QueryCache 객체의 query 배열과 queriesInMap 객체에 Query 객체가 존재하는 것을 말한다. 여기서 cache가 존재한다고 해서 refetching을 하지 않는 것은 아니다(데이터가 stale 상태라면 refetching).

 

 

Stale?

 

 

stale의 사전적 정의는 위와 같이 '탁한', '신선하지 않은'이라는 뜻이다. 가져온 데이터가 stale 하다면, 이 데이터는 더 이상 신선하지 않다는 것이고 업데이트가 필요하다. React Query는 쿼리가 stale 한 상태일 때, 다음과 같은 상황에서 해당 쿼리를 refetch 한다.

 

• 새로운 Query Instance가 마운트 될 때 (페이지 이동 후 등의 상황) / refetchOnMount
• 브라우저 화면을 다시 focus 할 때  / refetchOnWindowFocus
• 인터넷이 재연결되었을 때  / refetchOnReconnect
• refetchInterval이 설정되어 있을 때  / refetchInterval

 

stale time, cache time 설정

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60, // 없을 경우 기본 값 0초
      cacheTime: 1000 * 60 * 5, // 없을 경우 기본 값 5분
    }
  },
});

 

 

---

 

변경이 자주 일어나지 않는 다면 staleTime을 조정해 불필요한 네트워크 요청 횟수를 줄일 수 있을 것이고, 변경이 자주 일어난다면 기본 설정을 유지하는 등의 방법이 있을 것이다.