React Query でデータを追加、削除、変更、クエリするにはどうすればよいですか?

React Query でデータを追加、削除、変更、クエリするにはどうすればよいですか?

現代の Web 開発では、フロントエンドとバックエンドを分離するアーキテクチャが広く使用されています。フロントエンド開発者は通常、データの追加 (Create)、削除 (Delete)、更新 (Update)、クエリ (Query) など、バックエンド データを操作する必要があります。これらの操作を簡素化し、開発効率を向上させるために、React Query ライブラリが一般的な選択肢となっています。この記事では、React Query を使用してデータを追加、削除、変更、クエリする方法を紹介します。

React Query は、非同期データの管理に重点を置いた状態管理ライブラリです。データの取得、更新、削除に加え、データのキャッシュと無効化を自動的に管理するための強力なツールと API のセットを提供します。

まず、React Query をインストールして設定する必要があります。次のコマンドを使用して React Query をインストールできます:

npm install react-query

または

yarn add react-query

次に、アプリケーションのルート コンポーネントに React Query Provider を追加します:

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

const queryClient = new QueryClient();

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

次に、 React Query でデータの追加、削除、変更、クエリを実装する方法を見てみましょう。

新しいデータの作成/追加

新しいデータを作成するには、useMutation フックを使用します。このフックは関数をパラメータとして受け取り、リクエストの送信と新しいデータの作成に使用されます。この関数は Promise を返し、データが正常に作成された後に解決する必要があります。

import { useMutation } from 'react-query';

function CreateData() {
  const { mutate, isLoading } = useMutation((data) =>
    fetch('/api/data', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
      },
    }).then((res) => res.json())
  );

  const handleCreate = () => {
    mutate({ name: 'New Data' }); // 传递新数据到 mutate 函数
  };

  return (
    <div>
      <button onClick={handleCreate} disabled={isLoading}>
        {isLoading ? 'Creating...' : 'Create Data'}
      </button>
    </div>
  );
}

上記のコードでは、useMutation フックを使用して、CreateData という名前のコンポーネントを作成します。 mutate この関数は、リクエストをトリガーし、新しいデータを作成するために使用されます。この例では、新しいデータをリクエストの本文として使用して、POST リクエストを /api/data アドレスに送信します。リクエストが成功すると、res.json() メソッドを呼び出して応答が解析され、Promise の解決後にデータが返されます。

データの削除

データを削除するには、useMutation フックを再度使用し、DELETE リクエストを送信します。データ作成の例と同様に、削除関数を渡し、関数が成功結果を返した後に解決する必要があります。

import { useMutation } from 'react-query';

function DeleteData({ dataId }) {
  const { mutate, isLoading } = useMutation(() =>
    fetch(`/api/data/${dataId}`, {
      method: 'DELETE',
    }).then((res) => res.json())
  );

  const handleDelete = () => {
    mutate();
  };

  return (
    <div>
      <button onClick={handleDelete} disabled={isLoading}>
        {isLoading ? 'Deleting...' : 'Delete Data'}
      </button>
    </div>
  );
}

上記のコードでは、DeleteData という名前のコンポーネントを定義し、useMutation フックを使用して削除関数を作成します。この関数は、DELETE リクエストをアドレス /api/data/{dataId} に送信します。{dataId} は、削除するデータの一意の識別子です。リクエストが成功すると、結果が Promise 解決として返されます。

データの更新

データを更新するには、useMutation フックを再度使用して PUT または PATCH リクエストを送信します。データの作成と削除の例と同様に、データを更新する関数を渡し、関数が成功を返した後に解決する必要があります。

import { useMutation } from 'react-query';

function UpdateData({ dataId }) {
  const { mutate, isLoading } = useMutation((data) =>
    fetch(`/api/data/${dataId}`, {
      method: 'PUT',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
      },
    }).then((res) => res.json())
  );

  const handleUpdate = () => {
    mutate({ name: 'Updated Data' });
  };

  return (
    <div>
      <button onClick={handleUpdate} disabled={isLoading}>
        {isLoading ? 'Updating...' : 'Update Data'}
      </button>
    </div>
  );
}

上記のコードでは、UpdateData という名前のコンポーネントを作成し、useMutation フックを使用して更新関数を作成しました。この関数は、更新されたデータをリクエストの本文として含む PUT リクエストを /api/data/{dataId} アドレスに送信します。リクエストが成功すると、結果が Promise 解決として返されます。

データのクエリ

データをクエリするには、React Query の useQuery フックを使用できます。このフックは引数として関数を受け取り、データを含むオブジェクトを返します。関数内で GET リクエストを送信し、応答内のデータを解析します。

import { useQuery } from 'react-query';

function GetData({ dataId }) {
  const { isLoading, error, data } = useQuery('data', () =>
    fetch(`/api/data/${dataId}`).then((res) => res.json())
  );

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

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

  return (
    <div>
      <h2>Data: {data.name}</h2>
    </div>
  );
}

上記のコードでは、useQuery フックを使用して、GetData という名前のコンポーネントを作成しました。 useQuery フックは文字列を識別子として受け取り、リクエストが成功した後にデータを自動的にキャッシュします。 GET リクエストを /api/data/{dataId} アドレスに送信し、応答内のデータを解析します。データのロード中は、「ロード中...」というテキストが表示されます。エラーが発生した場合は、エラー テキストが表示されます。それ以外の場合は、クエリされたデータが表示されます。

要約すると、React Query を使用してデータを追加、削除、変更、クエリする方法を学習しました。 React Query は、データ管理と対話を簡素化するための多くの強力なツールと API を提供します。これらのツールやAPIを利用することで、より簡単にデータを操作でき、フロントエンド開発の効率を向上させることができます。この記事があなたのお役に立てば幸いです!

以上がReact Query でデータを追加、削除、変更、クエリするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。