React Query データベース統合ガイド: クイック スタート チュートリアル

React Query データベース統合ガイド: クイック スタート チュートリアル

はじめに:
React Query は、強力なデータ クエリ ライブラリであり、シンプルかつ効率的な管理方法を提供します。アプリケーションデータをクエリします。その設計コンセプトはフックに基づいており、React アプリケーションでの使用が非常に簡単です。このガイドでは、React Query をデータベースと統合して、データの高速なクエリと更新を可能にすることに焦点を当てます。

1. React Query のインストールとセットアップ
まず、React Query をインストールする必要があります。ターミナルを開き、プロジェクト ディレクトリで次のコマンドを実行します。

npm install react-query

インストールが完了したら、アプリケーションのルート コンポーネントで React Query のプロバイダーを設定する必要があります。ルート コンポーネントに次のコードを追加します。

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用程序组件 */}
    </QueryClientProvider>
  );
}

これで、React アプリに React Query が統合されました。

2. データベース統合レイヤーの作成
次に、データ操作を管理するためのデータベース統合レイヤーを作成します。この例では、仮想のデータベース API を使用します。プロジェクトで、api.js という名前のファイルを作成し、次のコードを追加します。

export async function fetchUsers() {
  // 发送请求获取用户数据
}

export async function deleteUser(id) {
  // 发送请求删除指定 id 的用户
}

export async function updateUser(id, data) {
  // 发送请求更新指定 id 的用户数据
}

export async function createUser(data) {
  // 发送请求创建新用户
}

このファイルでは、ユーザーの取得、ユーザーの削除、およびユーザーの更新をそれぞれ定義します。ユーザー。実際の状況に応じて、これらの関数の実装の詳細を調整する必要がある場合があります。

3. データ クエリに React Query を使用する
これで、データ クエリに React Query の使用を開始できます。コンポーネントに必要なフックをインポートし、それらを使用してデータをクエリします。次に、ユーザー リストのクエリの例を示します。

import { useQuery } from 'react-query';

import { fetchUsers } from './api';

function UserList() {
  const { data, isLoading, isError } = useQuery('users', fetchUsers);

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

  if (isError) {
    return <div>Error occurred while fetching data.</div>;
  }

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

この例では、useQuery フックを使用してユーザー データをクエリします。最初のパラメータは、クエリのキー値を識別する文字列です。 2 番目のパラメーターは、前に定義した fetchUsers 関数を呼び出してユーザー データを取得する関数です。 useQuery フックは、データ、読み込みステータス、エラー ステータスを取得できるクエリ結果を含むオブジェクトを返します。

4. データ更新に React Query を使用する
React Query は、データのクエリに加えて、データを更新するためのフックも提供します。コンポーネントに useMutation フックをインポートし、それを使用してユーザー データを更新します。ユーザーを更新する例を次に示します。

import { useMutation } from 'react-query';

import { updateUser } from './api';

function UserForm({ user }) {
  const mutation = useMutation((data) => updateUser(user.id, data));

  const handleSubmit = (event) => {
    event.preventDefault();

    const formData = new FormData(event.target);
    const userData = Object.fromEntries(formData.entries());

    mutation.mutate(userData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" defaultValue={user.name} />
      <input type="text" name="email" defaultValue={user.email} />
      <button type="submit" disabled={mutation.isLoading}>
        {mutation.isLoading ? 'Saving...' : 'Save'}
      </button>
    </form>
  );
}

この例では、useMutation フックを使用してユーザー データを更新します。 updateUser 関数を useMutation に渡すと、mutate 関数を含むオブジェクトが返されます。フォームが送信されるときに mutation.mutate 関数を呼び出し、フォーム データをパラメーターとして渡します。これにより、データの更新がトリガーされます。

結論:
このガイドでは、React クエリとデータベースを React アプリケーションに統合して、高速なデータ クエリと更新を実現する方法を紹介します。上記の手順に従うことで、データ管理に React Query の活用を簡単に開始できます。この記事がお役に立てば幸いです!

以上がReact Query データベース統合ガイド: クイック スタート チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。