データフェッチングライブラリ

Reactにおけるデータフェッチングライブラリとして、SWRやReact Queryがよく使われます。これらのライブラリは、ウェブアプリケーション開発における様々な課題を解決します。以下にその主な機能を挙げます。

危険

各種ライブラリのアップデートによって、コードの例が古くなる場合があります。
必ず公式サイトの参考例を確認するようにしてください。

SWR

SWRは、データフェッチングのためのReactフックです。このライブラリが解決する主な課題は次のとおりです：

キャッシングと再検証（Stale-While-Revalidate）: SWRは、キャッシュされたデータを即座に表示し、背後でデータを更新（再検証）します。これにより、ユーザーには常に最新の情報が表示されます。
自動的な再取得: フォーカス、ネットワークの回復、リフレッシュなどのイベントに基づいて自動的にデータを再取得します。
リクエストのデデュプリケーション: 同じデータの複数のリクエストを一つにまとめて、無駄なトラフィックを減らします。
パフォーマンス: キャッシングと効率的なデータ取得の方法により、アプリケーションのパフォーマンスを向上させます。

useSWRの例

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>エラーが発生しました。</div>
  if (!data) return <div>読み込み中...</div>

  return <div>こんにちは、{data.name}さん！</div>
}

React Query

React Query公式サイト

React Queryもデータフェッチングのためのライブラリですが、以下のような特徴があります：

サーバーの状態管理: React Queryは、サーバーから取得したデータを効率的にキャッシュし、状態を管理します。
データ同期: 背後で自動的にデータを更新し、アプリケーション内のデータを最新の状態に保ちます。
リクエストのキャンセルと再試行: リクエストのキャンセルや失敗したリクエストの再試行など、より複雑なユースケースに対応します。
開発者体験: デバッグやデータ検査を容易にするツールを提供します。

useQueryの例

import { useQuery } from 'react-query'

function Todos() {
  const { isLoading, error, data } = useQuery('todos', fetchTodos)

  if (isLoading) return <div>読み込み中...</div>

  if (error) return <div>エラーが発生しました。</div>

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

これらのライブラリは、Reactでのデータフェッチングを効率的かつ効果的に行うための重要なツールです。それぞれの特徴を理解し、プロジェクトの要件に合わせて選択することが重要です。

mutationのサンプルについて

それぞれのライブラリにおけるmutateの使用例を追加して説明します。

SWRでのmutateの使用例

SWRでは、mutate関数を使用して、ローカルのキャッシュを手動で更新することができます。これは、サーバーに変更を送信した後、クライアント側のキャッシュをすぐに更新する場合に便利です。

import useSWR, { mutate } from 'swr'

function Profile() {
  const { data, error, mutate } = useSWR('/api/user', fetcher)

  const updateProfile = async () => {
    await updateUserData() // サーバー上でユーザーデータを更新する関数
    mutate() // キャッシュを更新
  }

  if (error) return <div>エラーが発生しました。</div>
  if (!data) return <div>読み込み中...</div>

  return (
    <div>
      <div>こんにちは、{data.name}さん！</div>
      <button onClick={updateProfile}>プロフィールを更新</button>
    </div>
  )
}

React Queryでのmutateの使用例

React Queryでは、useMutationフックを使用して、サーバーに変更を送信し、その後でキャッシュを更新することができます。

import { useMutation, useQueryClient } from '@tanstack/react-query'

const queryClient = useQueryClient()

// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
const mutation = useMutation({
  mutationFn: addTodo,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] })
    queryClient.invalidateQueries({ queryKey: ['reminders'] })
  },
})

これらの例では、ユーザーがサーバーへの変更を行った後、ローカルのキャッシュを即座に更新しています。SWRとReact Queryは、このようにデータの同期を簡単に保ちながら、ユーザー体験を向上させることができます。

データフェッチングライブラリ

SWR​

useSWRの例​

React Query​

useQueryの例​

mutationのサンプルについて​

SWRでのmutateの使用例​

React Queryでのmutateの使用例​

SWR