React Query Devtools

今回は、React Queryライブラリが提供する強力なツールReact Query Devtoolsについて知りました.
まず、ReactQuery Devtoolsを使用するには、ReactQuery Devtoolsモジュールをロードする必要があります.

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コンポーネントが閉じる前にボトムを呼び出し、最初にinitialIsOpenプロパティをfalse、positionをbottom-rightに設定します.
次に、次の画面が表示されます.

以上のように、花ボタンが生成されます.該当するボタンをクリックします.

以上のように、ReactQueryが提供する開発者ツールを開くことができます.開発者ツールでは、

fresh

fetching

stale

inactive

データFetching Stateなどを表示できます.
「スーパーヒーロー」リストをクリックすると、取得したAPIに関する情報が表示されます.

右側の欄では、ObserverはAPI呼び出しを要求するobserverの数を表し、この場合、RQスーパーヒーローページのUserQuery呼び出しを表す.最後にqueryがロードされた時刻をLast Updateで確認することもできます.
Actionsボタンは、queryに関連する操作を試みることもできます.
Data Explorerタブでは、chrome devtoolのNetworkタブでの情報も表示できます.
Query Explortでは、クエリーのステータスも表示できます.
上記のReact Query Demotoolsから提供された情報を十分に活用すれば、データ取得操作をより容易に行うことができる.