[리액트] React-Query - 2. CacheTime , StaleTime (feat.ReactQueryDevtools)

React-Query 장점 중의 하나였던 캐싱이야기를 해보려고합니다. 

 

캐싱을 이야기 전에 알아두면 좋을 tool이 있습니다. 

바로 ReactQueryDevtools 이라는 것으로 데이터가 fetching 되고 그 상태값이라던가 내부 내용을 자세히 볼 수 있게 도와주는 tool입니다. react query 라이브러리에서 제공하는 강력한 도구입니다. 

 

 

▶ ReactQueryDevtools 사용법 

import { ReactQueryDevtools} from 'react-query/devtools';
//이렇게 import 합니다

function App() {
  return (
      <QueryClientProvider client={queryClient}>
    <Router>
        <Routes>
          <Route exact path="/super-heroes" element={<SuperHeroesPage/>} />
          <Route exact path="/rq-super-heroes" element={<RqSuperHeroesPage />} />
          <Route exact path="/" element={<HomePage />} />
        </Routes>
    </Router>
        <ReactQueryDevtools initialIsOpen={false} position='bottom-right' />
      </QueryClientProvider>
  );
}

아래와 같이 화면 하단 오른쪽에 뜬 버튼을 보실 수 있어요. 클릭을 하면 오른쪽 화면처럼 뜹니다.

 

tools 안에서 fresh , fetching, stale, inactive 와 같이 Data Fetching Status를 확인 할 수 있습니다. 

이 부분을 보면 캐싱의 이해가 더 쉬울 것입니다. 
오른쪽에는 Observer라는 것이 있는데 해당 API call를 요청하는 observer의 수를 나타내며, Last Updated에서 마지막으로 query를 불러온 시간을 확인할 수도 있다. Actions 버튼은 query와 관련된 action을 해볼 수도 있습니다. Query의 상태도 확인 할 수 있으며 devtools에서 제공하는 정보를 잘 활용하면 data fetching 작업을 더 수월하게 수행할 수 있습니다.

 

 

CacheTime

data가 inactive 된 상태일 때 캐싱된 상태로 남아있는 시간을 이야기합니다. 

query instances가 mount 되었다가 unmount 되면 inactive 상태로 변경이 되고 , 캐시는 cacheTime 만큼 유지가 됩니다.

캐시가 유지되는 시간 동안은 query instances가 다시 mount 되면 data를 fetch하는 동안 캐시 데이터를 보여줍니다. 

이 시간이 지나면 가비지 콜렉터로 삭제가 됩니다. 기본 값이 5분입니다

 

 

StaleTime

data가 fresh 상태에서 stale상태로 변경되는데 걸리는 시간입니다

fresh상태일때는 페이지 이동이 있어도 다시 fetch가 일어나지 않습니다. 즉, query instances가 새롭게 mount되어도 네트워크 fetch가 일어나지 않습니다. 

data가 한번 fetch되고 나면 staleTime이 지나지 않았다면 unmount후 mount 되어도 fetch가 일어나지 않습니다. 

기본 값은 0입니다. 그러므로 따로 staleTime을 지정하지 않고 사용한다면 ReactQuery의 캐싱 기능을 활용할 수 없습니다.

 

 

아래와 같이 cacheTime, staleTime 을 설정하실 수 있습니다. 

useQuery 안에서 설정해주시면 된답니다. 물론 queryClient에서도 하실 수 있습니다.

export const RqSuperHeroesPage = (props) => {
    const {isLoading, data, isError, error } = useQuery('super-heroes', fetchSuperHeroes,
    {
    cacheTime: 500,
    staleTime: 3000,
    })

    if(isLoading){
        return <h2>LOading....</h2>
    }

    if(isError){
        return <h2>{error.message}</h2>
    }

    return (
        <>
            <h2>RQ Super Heroes Page</h2>
            {data?.data.map(hero => {
                return <div>{hero.name}</div>
            })}
        </>
    )

 

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // 20 second
      staleTime: 20000,
    },
  },
});