React Query でデータベースのバッチ操作を実装する方法

React Query では、バックエンド データベースでバッチ操作を実行する必要があることがよくあります。この記事では、React Query でデータベースにバッチ操作を実装する方法を紹介し、具体的なコード例を通じてそれを示します。

React Query は、データの状態を管理し、データ リクエストを処理するためのライブラリです。これにより、開発者はバックエンド データベースとのやり取りを簡単に処理できるようになり、さまざまな強力な機能が提供されます。

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

npm install react-query

次に、アプリケーションのエントリ ファイルに React Query を設定する必要があります。次のコードを使用できます:

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

const queryClient = new QueryClient();

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

export default App;

次に、データベースにバッチ操作を実装します。ユーザー管理機能があり、選択したユーザーを一括で削除する必要があるとします。これは、次の手順で実現できます。

1. ユーザー リストを取得するためのリクエスト関数を作成します。次のコードを使用して定義できます:

import axios from 'axios';

const getUsers = async () => {
  const response = await axios.get('/api/users');
  return response.data;
};

2. React Query の useQuery フックを使用してユーザー リスト データを取得します。これは、次のコードを使用して実現できます。

import { useQuery } from 'react-query';

const UserList = () => {
  const { data, isLoading } = useQuery('users', getUsers);

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

  // 渲染用户列表的逻辑
};

3. ユーザーを削除するためのリクエスト関数を作成します。次のコードを使用して定義できます:

import axios from 'axios';

const deleteUser = async (id) => {
  await axios.delete(`/api/users/${id}`);
};

4. React Query の useMutation フックを使用してユーザーの削除を処理します。これを実現するには、次のコードを使用します。

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

const UserList = () => {
  // 其他代码...

  const queryClient = useQueryClient();

  const deleteMutation = useMutation(deleteUser, {
    onSuccess: () => {
      queryClient.invalidateQueries('users');
    },
  });

  const handleDelete = (id) => {
    deleteMutation.mutate(id);
  };

  // 渲染用户列表的逻辑
};

上記のコードでは、useQueryClient フックを使用して QueryClient のインスタンスを取得し、invalidateQueries メソッドを呼び出してユーザー リスト データを無効にしました。ユーザー削除後はリセット可能ですので、最新のリストデータを取得してください。

最後に、ユーザー リストに削除ボタンをレンダリングし、handleDelete 関数に関連付けます。これは、次のコードを使用して実現できます。

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

const UserList = () => {
  // 其他代码...

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>
          {user.name}{' '}
          <button onClick={() => handleDelete(user.id)}>删除</button>
        </li>
      ))}
    </ul>
  );
};

上記の手順により、データベースに対するバッチ操作、特にユーザーの削除を正常に実装できました。削除ボタンをクリックすると、handleDelete 関数が呼び出され、削除操作がトリガーされ、ユーザー リスト データが自動的に更新されます。

要約すると、React Query はバックエンド データベースでのバッチ操作を処理するための使いやすく強力なツールを提供します。 useMutation フックを使用して、操作が成功した後にリクエスト関数とコールバックを処理することで、さまざまなデータベース操作を簡単に実装できます。上記例のコードは参考用であり、実際の開発ではニーズに応じて調整や拡張が必要になる場合があります。この記事が、React Query のデータベース バッチ操作方法をよりよく理解し、使用するのに役立つことを願っています。

以上がReact Query でデータベースのバッチ操作を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。