React Query Devtools

이번에는 React Query 라이브러리에서 제공하는 강력한 도구인 React Query Devtools에 대해 알아보았다.

먼저 React Query Devtools를 사용하려면 ReactQueryDevtools 모듈을 불러와야 한다.

import './App.css';
import { Routes, Route, Link } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';
import { HomePage } from './components/Home.page';
import { RQSuperHeroesPage } from './components/RQSuperHeroes.page';
import { SuperHeroesPage } from './components/SuperHeroes.page';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <nav>
        <ul>
          <li>
            <Link to='/'>Home</Link>
          </li>
          <li>
            <Link to='/super-heroes'>Traditional Super Heroes</Link>
          </li>
          <li>
            <Link to='/rq-super-heroes'>RQ Super Heroes</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path='/' element={<HomePage />} />
        <Route path='/super-heroes' element={<SuperHeroesPage />} />
        <Route path='/rq-super-heroes' element={<RQSuperHeroesPage />} />
      </Routes>
      <ReactQueryDevtools initialIsOpen={false} position='bottom-right' />
    </QueryClientProvider>
  );
}

export default App;

위와 같이 import를 하고, QueryClientProvider Components가 닫히기전 하단 부분에 호출을 하고, 최초에는 닫혀있도록 initialIsOpen 속성을 false로 두고, position은 bottom-right로 설정한다.

그 후 실행을 한다면 다음과 같은 화면이 보일 것이다.

위와 같이 꽃모양의 버튼이 생성된다. 해당 버튼을 클릭하면

위와 같이 React Query에서 제공하는 개발자 도구를 열 수 있다. 개발자 도구 안에는

• fresh
• fetching
• stale
• inactive

와 같은 Data Fetching State를 확인할 수 있다.

["super-heroes"] 리스트를 클릭하면, fetch한 API에 대한 정보를 받아올 수 있다.

오른쪽 란에서 Observer는 해당 API call를 요청하는 observer의 수를 나타내며, 이 경우엔 RQ super heroes page 내의 useQuery call을 나타낸다. Last Updated에서 마지막으로 query를 불러온 시간을 확인할 수도 있다.

Actions 버튼은 query와 관련된 action을 해볼 수도 있다.

Data Explorer 탭에서는 chrome devtool의 network 탭에서 확인할 수 있었던 정보를 따로 확인할 수도 있다.

Query Explort 에서는 query의 상태 또한 확인할 수 있다.

위에서 기술한 React Query Devtools에서 제공하는 정보를 잘 활용하면, Data Fetching 작업을 더 수월하게 수행할 수 있는 것이 유용하다고 볼수 있다.