React Query でデータベースの読み取りと書き込みを分離するにはどうすればよいですか?

React Query でデータベースの読み取りと書き込みを分離するにはどうすればよいですか?

現代のフロントエンド開発では、データベースの読み取りと書き込みを分離することが、アーキテクチャ設計の重要な考慮事項です。 React Query は、フロントエンド アプリケーションのデータ取得および管理プロセスを最適化する強力な状態管理ライブラリです。この記事では、React Query を使用してデータベースの読み取りと書き込みの分離を実現する方法と、具体的なコード例を紹介します。

React Query の中心となる概念は、Query、Mutation、QueryClient です。クエリはデータの取得に使用され、ミューテーションはデータの変更に使用され、QueryClient はクエリとミューテーションのステータスの管理と追跡に使用されます。これらの概念を使用して、データベースの読み取りと書き込みを分離できます。

まず、2 つの異なる API クライアントを構成する必要があります。1 つはデータの読み取り用で、もう 1 つはデータの書き込み用です。 axios や fetch などのライブラリを使用して、これらの API クライアントを作成できます。サンプル コードは次のとおりです:

import axios from 'axios';

const readApiClient = axios.create({
  baseURL: 'https://api.read.com',
});

const writeApiClient = axios.create({
  baseURL: 'https://api.write.com',
});

export { readApiClient, writeApiClient };

次に、React Query の QueryProvider コンポーネントと MutationProvider コンポーネントを使用して、アプリケーションでこれら 2 つのクライアントを構成できます。 QueryProvider はデータを読み取るクライアントを構成するために使用され、MutationProvider はデータを書き込むクライアントを構成するために使用されます。サンプルコードは次のとおりです:

import { QueryClient, QueryProvider, MutationProvider } from 'react-query';
import { readApiClient, writeApiClient } from './api';

const queryClient = new QueryClient();

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

これで、アプリケーションのコンポーネントで React Query の useQuery フックと useMutation フックを使用して、データの読み取りと書き込みのリクエストを送信できるようになります。サンプル コードは次のとおりです。

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

const fetchUser = async () => {
  const response = await readApiClient.get('/users/1');
  return response.data;
};

const updateUser = async (userData) => {
  const response = await writeApiClient.put('/users/1', userData);
  return response.data;
};

const Profile = () => {
  const { data, isLoading } = useQuery('user', fetchUser);
  const mutation = useMutation(updateUser, {
    onSuccess: () => {
      queryClient.invalidateQueries('user');
    },
  });

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

  return (
    <div>
      <h1 id="data-name">{data.name}</h1>
      <button onClick={() => mutation.mutate({ name: 'John Doe' })}>
        Update Name
      </button>
    </div>
  );
};

上記のコードでは、useQuery フックを使用してユーザー データを取得し、useMutation フックを使用してユーザー データを更新します。更新が成功した後、最新のユーザー データを再取得するために、queryClient.invalidateQueries メソッドを使用してクエリを無効にします。

上記の手順により、データベースの読み取りと書き込みの分離に成功しました。 React Query の QueryProvider コンポーネントと MutationProvider コンポーネントを使用すると、読み取り操作と書き込み操作用に異なる API クライアントを構成できるため、データベースの読み取りと書き込みを分離できます。同時に、useQuery フックと useMutation フックを使用することで、コンポーネント内のデータの読み取りと書き込みのリクエストを簡単に送信し、状態の管理と更新を実行できます。

要約すると、React Query は、フロントエンド アプリケーションのデータ取得と管理プロセスの最適化に役立つ強力な状態管理ライブラリです。さまざまな API クライアントを適切に構成し、QueryProvider、MutationProvider、useQuery、および useMutation フックを使用することで、React Query でデータベースの読み取りと書き込みの分離を実現できます。これは、効率的でスケーラブルなフロントエンド アプリケーションを構築するために非常に重要です。

以上がReact Query でデータベースの読み取りと書き込みを分離するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。