React Query 개발자 도구 & staleTime vs cacheTime

1. React Query 개발자 도구 

 

React Query 개발자 도구는 쿼리 키로 쿼리를 보여주고 모든 쿼리의 상태(활성, 비활성, 만료 등)를 말해준다. 또한 마지막으로 업데이트된 타임스탬프와 데이터, 쿼리 등을 보여준다.

공식 문서에 따르면 개발자 도구는 프로덕션 번들에 포함되지 않는다. 그러므로 개발 중일 때는 보이고, 프로덕션 모드에서는 보이지 않는다.

아래의 코드를 참고하면 꽃 모양 버튼으로 된 React Query 개발자 도구를 브라우저 하단에서 볼 수 있다.

import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';

const queryClient = new QueryClient();

function App() {
  return (
    // provide React Query client to App
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <h1>Blog Posts</h1>
        <Posts />
      </div>
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
}

export default App;

 

2. staleTime vs cacheTime

staleTime

데이터가 stale(만료) 라는 말이 무슨 뜻 일까? 데이터 리페칭은 stale 상태에서만 이루어진다. 데이터가 리페칭 되는 상황에는 컴포넌트가 다시 마운트 되거나 윈도우가 리포커스 되어 있을 경우가 있다. 

staleTime은 max age라고 생각하면 된다. 데이터가 만료됐다고 판단하기 전까지 허용하는 시간이라고 말할 수 있다. 웹 사이트에 표시된 데이터가 10초 정도는 그대로여도 된다면 이를 10초로 설정한다. 

staleTime의 기본 값은 0ms이다. staleTime의 기본값은 0이라는 뜻은, 항상 stale 상태이므로 서버에서 최신 데이터를 다시 가져와야한다고 가정한다는 것이다.

cacheTime

캐시는 나중에 다시 필요할지도 모르는 데이터다. 구성된 cacheTime이 지나면 캐시의 데이터가 만료된다. 캐시가 만료되면 가비지 컬렉션이 실행된다. 

cacheTime의 기본 값은 5분이다.

cacheTime이 관찰하는 시간의 양은 특정 쿼리에 대한 useQuery가 활성화된 후 경과한 시간이고, 이는 페이지에 표시되는 컴포넌트가 특정 쿼리에 대해 useQuery를 사용한 시간을 말한다.

데이터가 캐시에 있는 동안은 페칭 할 때 사용되고 데이터 페칭을 중지하지 않으므로 서버의 최신 데이터로 새로 고침이 가능하다. 새로운 데이터로 꾸준히 업데이트 한다면 사용자는 계속 흰 화면만 볼 수도 있다. 그래서 새로운 데이터를 가져올 동안 약간 오래된 데이터를 보여지고, 여기서 말하는 약간 오래된 데이터가 바로 캐시이다.