前回は、React Queryを使って、APIを取得しました。

今回は、ReactQueryDevtoolsを使って、React Queryの状態を確認します。

まずは、react-query/devtoolsからReactQueryDevtoolsをインポートします。

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

QueryClientProviderで囲っている所の一番下にReactQueryDevtoolsを追加します。

return (
  <QueryClientProvider client={queryClient}>
    <Page />
    <ReactQueryDevtools initialIsOpen={false} />
  </QueryClientProvider>
);

設置が完了したので、ブラウザで確認します。

image2

ロード中は、fetchingが点灯しています。

image3

データを取得すると、fetchingからstaleへ変わりました。

image4

画面右側に、どのデータを取得したのかが表示されています。

ブログ一覧