React Query Database Plugin: 分散システムの操作ガイド

React Query は、アプリケーション データの管理に役立ち、強力なデータ クエリ、キャッシュ、更新機能を提供する、一般的に使用されるフロントエンド データ管理ライブラリです。ただし、アプリケーションがバックエンドの分散データベース システムと連携する必要がある場合、React Query と統合するデータベース プラグインが必要になる場合があります。この記事では、React Query データベース プラグインを使用して分散システムを操作する方法を説明し、詳細なコード例を示します。

React Query データベース プラグインは、バックエンド データベース システムと対話するために作成された中間層です。その主な機能は、データ クエリと更新リクエストをインターセプトし、バックエンド データベース システムに転送することです。データのクエリに関しては、データベース プラグインがデータを取得して React Query に返す役割を果たします。データ更新に関しては、データベース プラグインはバックエンド データベース システムに更新リクエストを送信し、更新されたデータを React Query に返す役割を果たします。このようにして、React Query を分散データベース システムと統合して、データのクエリ、キャッシュ、更新を行うことができます。

以下では、Firebase データベースとの連携を例に、React Query データベース プラグインの使い方を詳しく紹介します。

まず、React Query プラグインと Firebase プラグインをインストールしてインポートする必要があります。コマンド ラインに次のコマンドを入力して、React Query と Firebase をインストールします:

npm install react-query firebase

React Query と Firebase プラグインをアプリケーションのエントリ ファイルにインポートします:

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

const firebaseConfig = {...}; // Firebase 配置
const queryClient = new QueryClient();

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

上記のコードでは、 QueryClient インスタンスを作成し、アプリケーション全体を QueryClientProvider でラップします。次に、ReactQueryFirebaseProvider を使用して App コンポーネントをラップし、Firebase 構成情報を渡します。

次に、Firebase データベースからデータを取得するためのカスタム React Query フックを作成する必要があります。

import { useQuery } from 'react-query';
import { firestore } from 'firebase';

const useFirebaseQuery = (collectionPath) => {
  return useQuery(collectionPath, async () => {
    const querySnapshot = await firestore().collection(collectionPath).get();
    return querySnapshot.docs.map((doc) => doc.data());
  });
};

export default useFirebaseQuery;

上記のコードでは、useQuery フックを使用して Firebase データベースからデータを取得するカスタム フック useFirebaseQuery を作成しました。このフックは、クエリ対象のコレクションのパスを表す collectionPath パラメーターを受け取ります。フックの実装では、Firebase の firestore() メソッドを使用してコレクションのクエリ スナップショットを取得し、スナップショット内のドキュメント データを配列に変換して返します。このようにして、コンポーネントで useFirebaseQuery フックを使用してデータを取得できます。

import useFirebaseQuery from './hooks/useFirebaseQuery';

const App = () => {
  const { data, status } = useFirebaseQuery('users');

  if (status === 'loading') {
    return <div>Loading...</div>;
  }

  if (status === 'error') {
    return <div>Error fetching data</div>;
  }

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

上記のコードでは、useFirebaseQuery フックを使用して、「users」という名前のコレクション内のデータを取得します。データの状態に応じて、さまざまなコンポーネントをレンダリングします。

最後に、データを更新するときに、バックエンド データベース システムにデータ更新リクエストを送信する必要があります。コンポーネントでは、useMutation フックを使用してデータを更新し、ミューテーション関数で更新リクエストを送信します。

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

const useFirebaseMutation = (collectionPath) => {
  const queryClient = useQueryClient();

  return useMutation(
    async (data) => {
      await firestore().collection(collectionPath).add(data);
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries(collectionPath);
      },
    }
  );
};

export default useFirebaseMutation;

上記のコードでは、useMutation フックを使用して、データの更新リクエストを送信するためのカスタム フック useFirebaseMutation を作成します。このフックは、更新されるコレクションのパスを表す collectionPath パラメーターを受け入れます。ミューテーション関数では、Firebase の firestore() メソッドを使用して、新しいドキュメント データをコレクションに追加します。データが正常に更新された後、queryClient.invalidateQueries メソッドを使用して、コレクション パスに一致するすべてのクエリを無効にします。

以下は、useFirebaseMutation フックを使用してコンポーネント内のデータを更新するサンプル コードです:

import useFirebaseMutation from './hooks/useFirebaseMutation';

const AddUserForm = () => {
  const { mutate } = useFirebaseMutation('users');

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

    const name = event.target.elements.name.value;
    const email = event.target.elements.email.value;

    mutate({ name, email });

    event.target.reset();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Name" required />
      <input type="email" name="email" placeholder="Email" required />
      <button type="submit">Add User</button>
    </form>
  );
};

上記のコードでは、useFirebaseMutation フックを使用して、更新を送信するための mutate 関数を作成します。データのリクエスト。フォームが送信されると、追加するユーザーの名前とメール アドレスを form 要素から取得し、mutate 関数を呼び出してデータを更新します。

上記の手順により、React Query データベース プラグインの使用に基づく分散データベース システム (Firebase など) との連携に成功しました。 useFirebaseQuery フックを使用してデータを取得し、useFirebaseMutation フックを使用してデータを更新できます。このようにして、アプリケーションのデータをより便利に管理し、バックエンド データベース システムと効率的に連携できます。

この記事では Firebase データベース システムとの統合例を示しますが、React Query データベース プラグインを他の分散データベース システムと統合することもできます。バックエンド データベースの API ドキュメントに従って適切なフック関数を実装するだけで、データベースと連携できます。

つまり、React Query データベース プラグインは、アプリケーションのデータを簡単に管理し、バックエンドの分散データベース システムと連携するのに役立つ強力なツールです。 React Query との統合により、アプリケーションの開発と保守がより効率的になり、より良いユーザー エクスペリエンスを提供できるようになります。

この記事が、React Query データベース プラグインを使用して分散システムと連携する方法を理解するのに役立つことを願っています。 React Query とデータベース プラグインの使用が成功することを祈っています。

以上がReact Query Database Plugin: 分散システムの操作ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。