[React] 리액트 쿼리(React Query) staleTime을 설정하는 3가지 방법

React Query에서 staleTime은 쿼리의 만료 시간을 설정할 때 사용한다. staleTime이 지나면 쿼리의 캐시 데이터를 오래된 데이터로 간주하고 re-fetching을 시도한다. React Query에선 기본적으로 캐시 데이터 자체를 stale 데이터로 취급하기 때문에 staleTime의 기본값은 0이다. 하지만 변경 주기가 느린 데이터는 서버에 빈번하게 요청할 필요가 없기 때문에 staleTime을 적절하게 조절해주는 작업이 필요하다.

 

💡 중복 호출을 줄이기 위한 staleTime은 최소 20초 정도가 적당하다 — via tkdodo

 

1. 개별 쿼리 인스턴스에 staleTime 설정

---

// v4
useQuery('users', getUsers, { staleTime: 1000 * 60 });
// v5
useQuery({ queryKey: 'users', queryFn: getUsers, staleTime: 1000 * 60 });

 

2. 특정 쿼리키에 대한 staleTime 설정

---

queryClient.setQueryDefaults 메서드를 이용해 특정 쿼리키에만 적용하는 staleTime을 설정할 수 있다.

const queryClient = useQueryClient();
queryClient.setQueryDefaults('users', { staleTime: 1000 * 60 });
// users 쿼리키에 대해 staleTime을 1분으로 설정

 

3. 전역 staleTime 설정

---

QueryClient의 defaultOptions을 통해 해당 queryClient를 사용하는 모든 쿼리의 기본값을 설정할 수 있다.

// 방법 1
const queryClient = new QueryClient({
  defaultOptions: { queries: { staleTime: 1000 * 60 } },
  // 모든 쿼리 인스턴스의 staleTime을 1분으로 설정
});

// 방법 2 (이전 defaultOptions를 덮어씀)
const queryClient = useQueryClient();
queryClient.setDefaultOptions({ queries: { staleTime: 1000 * 60 } });