React クエリとデータベースによるデータ管理: ベスト プラクティス ガイド

React クエリとデータベースによるデータ管理: ベスト プラクティス ガイド

はじめに:
現代のフロントエンド開発では、データ管理は非常に重要なタスクです。高性能と安定性に対するユーザーの要求が高まり続けるにつれて、アプリケーション データをより適切に整理および管理する方法を検討する必要があります。 React Query は、データの取得、更新、キャッシュを処理するためのシンプルかつ柔軟な方法を提供する、強力で使いやすいデータ管理ツールです。この記事では、React Query とデータベースを使用したデータ管理のベスト プラクティスについて説明し、具体的なコード例を示します。

1. React Query と関連する依存関係をインストールする
まず、React Query と関連する依存関係をインストールする必要があります。これらのパッケージは、npm または Yarn を使用してインストールできます。

$ npm install react-query react-router-dom

2. React QueryProvider の設定
エントリ ファイルで、React QueryProvider をアプリケーションに追加する必要があります。 React QueryProvider は、データ管理関連のコンテキストをアプリケーション内のコンポーネントに提供する役割を果たします。

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

3. クエリ リクエストを開始する
React Query では、useQuery フックを使用してクエリ リクエストを開始できます。 useQuery フックの最初のパラメータは、取得するデータのキーを表す文字列です。 2 番目のパラメーターは非同期関数で、実際にデータを取得するために使用されます。

import { useQuery } from 'react-query';

function UserList() {
  const { isLoading, data, error } = useQuery('users', async () => {
    const response = await fetch('/api/users');
    const data = await response.json();
    return data;
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

4. データの更新
データの取得に加えて、React Query はデータ更新を処理する useMutation フックも提供します。 useMutation フックは、実際にデータを更新するために使用される非同期関数を受け入れます。最初の要素が更新操作をトリガーする関数である配列を返します。さらに、いくつかのオプションを使用して、更新リクエストを発行するときの動作を制御することもできます。

import { useMutation } from 'react-query';

function UpdateUserForm({ user }) {
  const mutation = useMutation(updatedUser => {
    return fetch(`/api/users/${user.id}`, {
      method: 'PUT',
      body: JSON.stringify(updatedUser),
    });
  });

  const handleSubmit = event => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const updatedUser = {
      name: formData.get('name'),
      age: formData.get('age'),
    };
    mutation.mutate(updatedUser);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" defaultValue={user.name} />
      <input type="number" name="age" defaultValue={user.age} />
      <button type="submit">Update</button>
    </form>
  );
}

5. データのキャッシュ
React Query はデフォルトでクエリされたデータを自動的にキャッシュし、必要に応じて更新します。 useQueryClient フックと queryClient.setQueryData メソッドを使用して、データを手動で更新できます。クエリされたキーによってデータを識別し、更新します。

import { useQuery, useQueryClient } from 'react-query';

function UserList() {
  const queryClient = useQueryClient();

  const { isLoading, data, error } = useQuery('users', async () => {
    const response = await fetch('/api/users');
    const data = await response.json();
    return data;
  });

  const handleUpdateUser = user => {
    // update the data in the cache
    queryClient.setQueryData('users', old => {
      const updatedData = old.map(u => {
        if (u.id === user.id) {
          return {
            ...u,
            name: user.name,
            age: user.age,
          };
        }
        return u;
      });
      return updatedData;
    });
  };

  // ...
}

6. データベースの使用
React Query は、データを取得するために使用する方法を制限しません。データがデータベースに保存されている場合は、クエリ関数に対応するコードを記述するだけでデータベースを操作できます。

import { useQuery } from 'react-query';
import { db } from 'path/to/database';

function UserList() {
  const { isLoading, data, error } = useQuery('users', async () => {
    const users = await db.get('users');
    return users;
  });

  // ...
}

7. 概要
React Query とデータベースを使用することで、アプリケーション内のデータをより適切に整理および管理し、優れたユーザー エクスペリエンスを提供できます。この記事では、React Query を使用したデータ管理のベスト プラクティス ガイダンスを、具体的なコード例とともに説明します。これがお役に立てば幸いです!

以上がReact クエリとデータベースによるデータ管理: ベスト プラクティス ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。