【2024年】フロントエンド開発でReact Queryを使いこなそう！状態管理の基礎から実践的な活用法まで

2024-07-14

当サイトでは一部リンクに広告が含まれています

フロントエンド開発において、APIからのデータ取得と状態管理は欠かせない要素です。その中でReact Queryは、これらの作業を驚くほど簡単かつ効率的に行うことができるライブラリとして注目を集めています。

React Queryを使用することで、複雑なデータフェッチングのロジックや状態管理のコードを大幅に簡略化できます。

本記事では、React Queryの基本的な概念から実践的な使用方法まで、詳しく解説していきます。フロントエンド開発者として、より効率的なアプリケーション開発を目指す方にぜひ参考にしていただきたい内容です。

この記事を書いた人

現役のフルスタックエンジニアとして活躍中
開発チームリーダーとして複数プロジェクトをリード
副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
プログラミングスクールのカリキュラム執筆経験あり

React Queryとは？

React Queryは、Reactアプリケーションでサーバーの状態を効率的に管理するためのライブラリです。単なるデータフェッチングツールではなく、非同期の状態管理ライブラリとして機能します。

React Queryの主な特徴

データのフェッチング、キャッシング、同期、更新を簡単に行える
サーバーの状態とクライアントの状態を明確に分離
宣言的なAPI設計により、コードの可読性と保守性が向上
自動的なバックグラウンド更新と再取得

React QueryのセットアップとQuery基本操作

インストールと初期設定

まず、React Queryをプロジェクトにインストールします。

npm install react-query

次に、アプリケーションのルートでQueryClientProviderを設定します。

import { QueryClient, QueryClientProvider } from 'react-query'
const queryClient = new QueryClient()
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* アプリケーションのコンポーネント */}
    </QueryClientProvider>
  )
}

基本的なクエリの使用

useQueryフックを使用して、データをフェッチします。

import { useQuery } from 'react-query'
function Example() {
  const { isLoading, error, data } = useQuery('todos', fetchTodos)
  if (isLoading) return 'Loading...'
  if (error) return 'An error has occurred: ' + error.message
  return (
    <div>
      {data.map(todo => (
        <p key={todo.id}>{todo.title}</p>
      ))}
    </div>
  )
}

React Queryの状態管理

React Queryは、以下の状態を自動的に管理します：

isLoading: データがロード中かどうか
isError: エラーが発生したかどうか
data: 成功時のデータ
error: エラー時の情報

これにより、開発者は複雑な状態管理のロジックを書く必要がなくなり、コードの可読性と保守性が大幅に向上します。

キャッシュと再フェッチの戦略

staleTimeの活用

staleTimeオプションを使用して、データがstale（古い）とみなされるまでの時間を設定できます。

useQuery('todos', fetchTodos, { staleTime: 5000 }) // 5秒間はデータを新鮮とみなす

キャッシュの無効化

データが更新された場合、キャッシュを無効化できます。

queryClient.invalidateQueries('todos')

Mutationの実装

useMutationフックを使用して、データの更新を行います。

import { useMutation, useQueryClient } from 'react-query'
function AddTodo() {
  const queryClient = useQueryClient()
  const mutation = useMutation(newTodo => {
    return axios.post('/todos', newTodo)
  }, {
    onSuccess: () => {
      queryClient.invalidateQueries('todos')
    },
  })
  return (
    <form onSubmit={(e) => {
      e.preventDefault()
      mutation.mutate({ title: 'New Todo' })
    }}>
      <button type="submit">Add Todo</button>
    </form>
  )
}

パフォーマンス最適化

並列クエリ

複数のクエリを並列で実行できます。

const result = useQueries([
  { queryKey: ['todo', 1], queryFn: () => fetchTodoById(1) },
  { queryKey: ['todo', 2], queryFn: () => fetchTodoById(2) },
])

無限ローディング

useInfiniteQueryを使用して、ページネーションやスクロールベースのデータ読み込みを実装できます。

const {
  data,
  fetchNextPage,
  hasNextPage,
} = useInfiniteQuery('projects', fetchProjects, {
  getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
})