[React-Query] staleTime과 cacheTime 다루기

January·2023년 8월 29일

Frontend

목록 보기

29/31

React-Query 관련 블로그 Customize staleTime 글을 읽고서 더 효율적인 데이터 패칭을 구현할 수 있겠다 싶어서 React-query에서 staleTime과 cacheTime을 알아보고 사용해보고자 합니다.

staleTime

React-Query 관리 개발자 Dominik은 staleTime을 이렇게 설명합니다.

쿼리가 최신 상태에서 더 이상 최신이 아닌 상태로 전환하는 시간을 나타냅니다. 쿼리가 최신 상태인 동안에는 데이터는 항상 캐시에서만 읽히며 네트워크 요청은 발생하지 않습니다! 쿼리가 최신 상태가 되지 않은 경우 (기본적값은 즉시), 여전히 데이터는 캐시에서 가져오게 되지만 일부 조건 하에서는 백그라운드 리페치가 발생할 수 있습니다.

Client-side에서 캐싱 기능이 위험한 이유에서 설명했듯이 캐싱된 데이터를 잘못 활용하게 되면 유저는 잘못된 정보를 받게됩니다. 그렇기에 staleTime이 필요합니다. Dominik 또한 cacheTime 조작이 필요한 경우가 거의 없고 필요한 것은 staleTime이라고 합니다.

Default Value

staleTime은 0초가 기본값이다. 그렇기 때문에 useQuery fetchFunc은 매번 refetch가 일어난다. cacheTime은 5분이지만 값이 stale하지 않다고 보기 때문에 refetch가 일어나는거다.

Customize staleTime

Dominik 블로그에서는 staleTime을 특정 사용 사례에 맞는 값으로 설정해야한다고 한다.

데이터가 신선한 동안에는 항상 캐시에서만 가져온다는 것입니다. 데이터가 얼마나 자주 검색하던지 간에 신선한 데이터에 대한 네트워크 요청은 표시되지 않습니다.

블로그에서 제시하는 staleTime 기본값은 20초이다. 이는 개인적인 것이고 중복 요청을 제거하기 위해 최소 20초로 설정하는 것을 좋아한다고 한다.

Example

React Query v3부터는 QueryClient.setQueryDefaults를 통해 쿼리 키별로 기본값을 설정하는 훌륭한 방법을 지원하기 때문에 이런 방식으로 기본값 설정을 할 수 있다. 또는 특정 키값에만 지정이 가능하다.

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // ✅ globally default to 20 seconds
      staleTime: 1000 * 20,
    },
  },
})

// 🚀 everything todo-related will have a 1 minute staleTime
queryClient.setQueryDefaults(todoKeys.all, { staleTime: 1000 * 60 })

useQuery에서 staleTime을 써봤다. Component 이동 반복 시 isfetching의 값이 5분동안 계속 false인 것을 확인할 수 있다.

const { isLoading, isFetching, isError, isSuccess, data, error, refetch } = 
	useQuery(["test"], getTodoFetch, {
		staleTime: 1000 * 60 * 5,
	}
);

isLoading과 isFetching

기존에 캐시된 데이터가 있느냐 에 따라 isLoading과 isFetching이 나뉜다.

isLoading
- 캐싱된 데이터조차 없이 처음 실행된 쿼리일 때 true이다.
- 캐싱된 데이터가 있을 경우 fetch를 하더라도 cacheTime 동안에는 항상 false이다.
- 어떤 데이터를 처음 가져올 때 사용
isFetching
- 캐싱 여부와 상관없이 비동기 함수가 처리되었으면 true이다.
- 어떤 데이터를 다시 가져와야 할 때 사용