【React-query使い方】useEffectなしでReact におけるAPIデータの取得方法(TypeScript対応)

プログラミング

更新日:

2024/04/17

投稿日:

2024/02/21

React VITE のセットアップ

ファイル構成

プロジェクト内容

main.tsx (index.js) ファイル

App.tsx (.jsx) ファイル

終わりに

React を使っているプロジェクトでAPIデータを取得するのはほぼ必須になるかと思います。

Web開発において、APIからデータを取得することは避けられない重要なプロセスです。その際にuseEffect内でAPIデータの取得をしているなら要注意。

useEffectでAPI データを取得するのは、 Reactの公式ガイドラインでも推奨されていません。

ここで登場するのが、react-queryという強力なライブラリです。
react-queryは、APIデータ取得のための煩わしさを軽減し、データのキャッシュ、同期、更新といった複雑なプロセスを簡単に扱うことができます。

react-query npm package: https://www.npmjs.com/package/react-query

下記のような機能を持っています。

オブジェクト操作
配列操作
データ取得時の読み込み状態や、エラー状態の管理を簡単にする
データ構造の変換など

これらの機能を駆使することで、より洗練されたデータ取得方法を実現できます。

この記事を読むことで、useEffectを使用する従来の方法から脱却し、react-queryを利用することで、アプリケーションのパフォーマンスを向上させると同時に、コードの可読性も高めることができます。

React VITE のセットアップ

React Vite のインストール

npm create vite@latest

react-queryのインストール


npm install react-query

BootStrap (オプション)

npm install bootstrap

ファイル構成

src
  -- App.tsx
  -- main.tsx (index.js)

プロジェクト内容

Random Fox API https://randomfox.ca/
GitLab レポジトリー
 デモサイトURL

スタイルにはBootStrapを使用しています。

react-query を使い、Random Fox API からランダムな画像リンクと、URLを取得します。

下記がこのプロジェクトの機能です。

画像の下にある青いボタンを押すことで、データをフェッチし画像とそのURLリンクを取得
画像が出力されるまで “Loading…” と表示
エラーの際にはエラーメッセージを出力
さらに初回のレンダリング時に、次の Fox の画像を前もって取得。読み込みが少しだけ速くなっている仕様

react-queryはデータ取得時の読み込み状態やエラー状態の管理を簡単にして、ユーザー体験を向上させます。初回レンダリング時に次のデータを先読みする機能は、アプリケーションの応答性を高める一例です。

main.tsx (index.js) ファイル

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

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

const queryClient = new QueryClient();

// bootstrap
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <QueryClientProvider client={queryClient}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </QueryClientProvider>
)

App.tsx (.jsx) ファイル

import { useQuery } from 'react-query';
import { useMutation, useQueryClient } from 'react-query';

function App() {
  const queryClient = useQueryClient();

  // API fetch
  const fetchFox = async () => {
    const res = await fetch('https://randomfox.ca/floof/');
    return res.json();
  };

  const mutation = useMutation(fetchFox, {
    onSuccess: (data) => {
      // フェッチしたデータでクエリデータを手動で更新する
      queryClient.setQueryData('myData', data);
    },
  });

  // 次の画像のデータを prefetch する関数
  const prefetchNextFoxImage = async () => {
    await queryClient.prefetchQuery('nextFoxImage', fetchFox);
  };

  // ボタンクリックでフェッチをトリガー
  const fetchOnButtonClick = () => {
    mutation.mutate();
  };

  // react-query
  const { isLoading, error, data } = useQuery('myData', fetchFox, {
    initialData: () => {
      // 初回レンダリング時に nextFoxImage のデータを prefetch する
      prefetchNextFoxImage();
      return queryClient.getQueryData('nextFoxImage');
    },
    refetchOnWindowFocus: false, // フォーカス時の自動リフェッチを無効化
  });

  if (isLoading) return 'Loading...';
  if (error) return 'An error occurred: ' + (error as Error).message;

  return (
    <div className='container text-center'>
      <h1 className='display-3'>🦊 FOX image</h1>
      <img src={data?.image} alt="Fox" style={{ width: "600px", height: "450px", objectFit: "cover" }} />
      <div>
        <a href={data?.link} target="_blank">Link</a>
      </div>
      <button onClick={fetchOnButtonClick} onMouseEnter={prefetchNextFoxImage} className="btn btn-primary mt-4">Show Another Fox</button>
    </div>
  );
}
export default App;