SWRを使ってAPIをコールする

React

今回はSWRの簡単な使い方を習得しました。
Fetchで取得したデータを表示するサンプルアプリにSWRを導入して、UI/UXを改善しました。この改善で、APIからのレスポンスを待つ間に画面が真っ白になる問題を解消しました。

【参考】
SWR公式ドキュメント

修正する内容

  • APIコールが失敗した場合、Failed to load.と表示する。
  • APIのレスポンスが返ってくるまでの間、Loading...と表示する。
  • APIのレスポンスが返ってきたら、現状と同じくStatus: OKと表示する。
  • コール先のURLやHTTPヘッダは変更しない。

なぜSWRを使うのか

SWR（Stale-While-Revalidate）は、React用のデータフェッチライブラリで、いくつかの重要な利点がある。

  1. SWRは背後でデータの有効性を確認しつつ、クライアントに直ちにデータを提供。ユーザーはページの読み込みを待つ時間が少なく、それでいて最新のデータを見ることができる。
  2. APIからエラーレスポンスが返された場合、エラー状態を明確に捉えて対処できる。具体的なエラーメッセージを表示するなど、UXの向上に寄与する。
  3. APIからのレスポンスが未返信の場合、Loading...といった状態表示が容易。ユーザーに進行状況を明確に示せる。
  4. データが変更される可能性がある場合に自動で再取得を行う設定が可能。ユーザーが手動でページを更新する必要がなくなる。
  5. 一度取得したデータをキャッシュし、同じAPIエンドポイントに対する後続のリクエストで再利用する。ネットワークリクエストの数が減り、アプリのレスポンスが速くなる。

修正前

  • fbc-swr-practice/src/App.jsx
import { useState } from "react";
import "./App.css";

function App() {
// 使用するAPIのURL。
  const url = "https://httpstat.us/200?sleep=2000";
// クライアントが理解できるコンテンツタイプをサーバーに伝えるもの。
  const headers = { Accept: "application/json" };

  const [status, setStatus] = useState("");

  fetch(url, { headers })
    .then((res) => res.json())
    .then((json) => setStatus(json.description));

  return <>{status && <p>Status : {status}</p>}</>;
}

export default App;

実装

1.SWRライブラリの追加

プロジェクトのルートディレクトリでSWRライブラリをインストール。

$ npm install swr
修正後
  • fbc-swr-practice/src/App.jsx
import "./App.css";
import useSWR from 'swr';

function App() {
  const url = "https://httpstat.us/200?sleep=2000";
  const headers = { Accept: "application/json" };

  const fetcher = url => fetch(url, { headers }).then(res => res.json());

  const { data, error } = useSWR(url, fetcher);

// エラーが存在する場合、エラーメッセージを表示。
  if (error) return <p>Failed to load.</p>;
// データがnullまたはundefinedの場合、ローディングメッセージを表示。
  if (!data) return <p>Loading...</p>;

// データがロードされた場合、状態を表示。
  return <p>Status: {data.description}</p>
}

export default App;
  • useSWRフックを使用しているが、このフックはデータがまだロードされていない（dataがnullまたはundefined）場合や、エラー（errorがtrue）が発生した場合に、それぞれ適切なメッセージを表示。

まとめ✏️

SWRの知識を活かして、更にリッチなWebアプリを作っていくのが楽しみです。特に、リアルタイムなデータ更新やキャッシュの活用といったところを、もっと深掘りしていきたいなと感じました。SWRの高度な設定や他のReact Hooksとの組み合わせとかを試してみるのも面白そう。