ReactとNext.jsでTanstackQueryの導入をやってみた

Posted at 2025-10-29

TanstackQueryとは?

TanstackQueryとは、データ取得する際に使われるライブラリです。
公式ドキュメントから引用するとWebアプリケーションでのサーバー状態の取得、キャッシュ、同期、更新が非常に簡単になります。

公式ドキュメント

インストール

React(npm)で進めて行きます。yarnを使っているならyarn、pnpmならpnpmでやってください。
コマンドが少し変わるので公式ドキュメントから確認してください。

npm i @tanstack/react-query

公式ドキュメントのインストール

従来のデータフェッチ(インターネット上から情報を取ってくること)のやり方

以前はuseEffectやuseStateなどを使っていました。

Posts.tsx

import { useState, useEffect } from 'react'
import axios from 'axios'

const Posts = () => {
    const [data, setData] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchPosts = async () => {
            try {
                setIsLoading(true);
                const response = await axios.get(
                    "***********"
                );
                setData(response.data);
                setError(null);
            } catch (err) {
                setError(err.message);
            } finally {
                setIsLoading(false);
            }
        };

        fetchPosts();
    }, []); // 空配列 = コンポーネントが最初に表示されたときだけ実行

    if (isLoading) return <div>読み込み中...</div>;
    if (error) return <div>エラー: {error}</div>;

    return (
        <div>
            <h1>投稿一覧</h1>
            <div>{data.map((post) => (
                <p key={post.id}>
                    <a href="/">{post.title}</a>
                </p>
            ))}</div>
        </div>
    )
}

export default Posts

従来のやり方の問題点

上記のコードくらいのuseStateやuseEffectの数なら、そんなに大した問題ではないのですが、
実際に稼働しているWebサービスだったらどうでしょうか？

大規模アプリで発生する問題

1.同じコードの繰り返し
APIからデータを取得するたびに、毎回以下を書く必要があります。💦

const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => { /* データ取得処理 */ }, []);

APIが10、20、100と増えていくたびに、このコードも同じだけ増えていきます。😱

2.重複したデータ取得

//Postsページ → ユーザー情報を取得
// Profileページ → 同じユーザー情報をまた取得
// Headerコンポーネント → また同じユーザー情報を取得
// → 無駄なAPI呼び出しが大量発生!

3.キャッシュ管理が大変

一度取得したデータを再利用したいけど、データが古くなったら再取得したい
この管理を自分でやるのは非常に大変😅

4.状態管理の複雑化
大量のuseStateとuseEffectを書くと、どこで何を管理しているのか分からなくなります。😭
コードが肥大化してぐちゃぐちゃになって行きます。

これらを解決するために生まれたのが
TanstackQueryです。

TanstackQueryでのデータフェッチ

queryClientをインスタンス化して、QueryClientProviderでComponentを囲みます。

App.tsx

import './App.css'
import Posts from './components/Posts'
import {
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'

const queryClient = new QueryClient() // queryClientをインスタンス化

function App() {
  // QueryClientProviderでComponentを囲む
  return ( 
    <QueryClientProvider client={queryClient}>
      <Posts />
    </QueryClientProvider>
  )
}

export default App

公式ドキュメントの概要

useQueryを呼び出す

useQueryを呼び出していく必要があります。はjsonplaceholderを使ってます。
ここでデータを取得してきて、画像はjsonplaceholderから取得してきたものです。
動画はわかりやすいので良かったら見てみてください。
あとコードはかなりシンプルになったかと思います。

components/Posts.tsx

import { useQuery } from '@tanstack/react-query'
import axios from 'axios'

const Posts = () => {
 const { data, isLoading, error } = useQuery({
  queryKey: ["posts"],
    queryFn: async () => {
     const { data } = await axios.get(
       "https://jsonplaceholder.typicode.com/posts"
     );
       return data;
    },
  });

  if (isLoading) return <div>読み込み中...</div>;
  if (error) return <div>エラー: {error.message}</div>;

  return (
    <div>
      <h1>投稿一覧</h1>
      <div>{data.map((post) => (
          <p key={post.id}>
            <a href="/">{post.title}</a>
          </p>
         ))}
      </div>
    </div>
    )
}

export default Posts