Axios と React-TanStack-Query を使用して Next.js でデータをフェッチするための完全ガイド

正直に言うと、fetch および useState と組み合わせた useEffect API についてはおそらくよくご存じでしょう。機能しますが、すぐに扱いにくくなります。エラー処理? 雑用です。キャッシング？悪夢だ。 データの更新を管理しますか?忘れてください!

しかし、データの取得がもっと簡単にできたらどうでしょうか? Axios と React-TanStack-Query を導入すると、データ管理がやりくり行為からスムーズで効率的なプロセスに変わります。

映画リスト アプリを考えてみましょう。これらのツールを使用すると、コードを繰り返す代わりに、機能の構築に集中できます。アップグレードの準備はできていますか?始めましょう!

---

なぜ fetch useState useEffect を無視するのでしょうか?

ソリューションに入る前に、従来のアプローチの限界を確認してみましょう。

1. 冗長性: 各データのフェッチには、状態のロード、エラー処理、およびフェッチ呼び出し自体のための反復コードが含まれます。
2. キャッシュの非効率性: fetch は本質的にデータをキャッシュしません。ページに戻るということは、すべてを再取得することを意味します。
3. 手動再フェッチ: データ更新には、リロードをトリガーするために手動介入が必要です。

これらの問題に対処しましょう。

---

ステップ 1: Axios と React-TanStack-Query のインストール

これらのパッケージをプロジェクトに追加します:

<code class="language-bash">npm install axios @tanstack/react-query</code>

次に、データ管理用のヘルパーである クエリ クライアント を構成します。

<code class="language-javascript">// /components/providers/QueryProvider.jsx
"use client"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

export default function QueryProvider({ children }) {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}</code>

<code class="language-javascript">// /layout.jsx
import localFont from "next/font/local";
import "./globals.css";
import QueryProvider from "../components/providers/QueryProvider";

const geistSans = localFont({
    src: "./fonts/GeistVF.woff",
    variable: "--font-geist-sans",
    weight: "100 900",
});
const geistMono = localFont({
    src: "./fonts/GeistMonoVF.woff",
    variable: "--font-geist-mono",
    weight: "100 900",
});

export const metadata = {
    title: "Tanstack Query with axios",
    description: "Generated by create next app",
};


export default function RootLayout({ children }) {
    return (
        <QueryProvider>{children}</QueryProvider>
    );
}</code>

これがセットアップです。データを取得しましょう!

---

React-TanStack-Query を使用したデータの取得

React-TanStack-Query を使用して、単純なフェッチの例をリファクタリングしてみましょう。 映画リストを取得する映画アプリを構築します:

従来のアプローチ (fetch useState useEffect)

<code class="language-javascript">import { useEffect, useState } from "react";

export default function Movies() {
  const [movies, setMovies] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("https://api.example.com/movies")
      .then(res => res.json())
      .then(data => {
        setMovies(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading movies...</p>;
  if (error) return <p>Error loading movies: {error.message}</p>;

  return (
    <ul>
      {movies.map(movie => (
        <li key={movie.id}>{movie.title}</li>
      ))}
    </ul>
  );
}</code>

それでは、React-TanStack-Query を使用してこれを効率化しましょう。

改良されたアプローチ (React-TanStack-Query)

<code class="language-javascript">import { useQuery } from "@tanstack/react-query";
import axios from "axios";

const fetchMovies = async () => {
  const response = await axios.get("https://api.example.com/movies");
  return response.data;
};

export default function Movies() {
  const { data: movies, error, isLoading } = useQuery(["movies"], fetchMovies);

  if (isLoading) return <p>Loading movies...</p>;
  if (error) return <p>Error loading movies: {error.message}</p>;

  return (
    <ul>
      {movies.map(movie => (
        <li key={movie.id}>{movie.title}</li>
      ))}
    </ul>
  );
}</code>

---

説明

1. useQuery: このフックはフェッチ、キャッシュ、およびエラー管理を処理します。useState や useEffect を手動で行う必要はもうありません!
2. 自動再取得: データは手動介入なしで最新のままです。
3. Axios 統合: Axios は、ネイティブ fetch API と比較してデータの取得を簡素化します。

---

Axios のカスタマイズ

実際のアプリでは、多くの場合、ヘッダー、ベース URL、または認証トークンが必要です。 再利用可能な Axios インスタンスを作成します:

<code class="language-javascript">// utils/axios.js
import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "https://api.example.com",
  headers: {
    Authorization: `Bearer ${process.env.API_TOKEN}`,
  },
});

export default axiosInstance;</code>

クエリでこのインスタンスを使用します:

<code class="language-javascript">import { useQuery } from "@tanstack/react-query";
import axiosInstance from "../utils/axios";

const fetchMovies = async () => {
  const response = await axiosInstance.get("/movies");
  return response.data;
};

// ... rest of the Movies component remains the same</code>

---

React-TanStack-Query の利点

これが価値のあるアップグレードである理由は次のとおりです:

1. 組み込みキャッシュ: データはキャッシュされ、不必要な再フェッチを回避します。
2. 簡略化されたエラー処理: 複雑な try/catch ブロックは不要です。
3. Stale-while-Revalidate: バックグラウンドで更新を取得している間にキャッシュされたデータを表示します。
4. 広範なカスタマイズ: フェッチ、ポーリング、再試行などを簡単に調整できます。

---

ボーナス: ページネーションの例

ページ分割された API の処理は簡単です:

<code class="language-bash">npm install axios @tanstack/react-query</code>

---

結論

React-TanStack-Query の採用は、高性能システムにアップグレードするようなものです。 キャッシュ、エラー処理、再フェッチを処理するため、優れた機能の構築に集中できます。 コードの繰り返しに飽きたら、ぜひ試してみてください。後悔はしません!

以上がAxios と React-TanStack-Query を使用して Next.js でデータをフェッチするための完全ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。