React Query とデータベースを使用してデータのサブスクリプションとパブリッシュを実装する

React Query とデータベースを使用してデータのサブスクリプションと公開を実装する

はじめに:
現代のフロントエンド開発では、データのリアルタイム更新と通信が重要です。非常に重要な部分です。 React Query は、強力なデータ クエリとキャッシュ機能を提供する優れたデータ レイヤー管理ライブラリです。データベースのリアルタイム監視機能と組み合わせることで、データの購読・公開を簡単に実現できます。この記事では、React Query とデータベースを使用してデータのサブスクリプションとパブリッシングを実装する方法を紹介し、対応するコード例を示します。

1. 環境の準備:
実装を開始する前に、必要な環境が準備されていることを確認してください。まず、MongoDB、Firebase などの適切なバックエンド データベースが必要です。次に、React アプリケーションを作成し、React Query をインストールする必要があります。次のコマンドを使用して、新しい React アプリケーションを作成して初期化できます:

npx create-react-app react-query-demo
cd react-query-demo

次に、React Query をインストールします:

npm install react-query

2. データベース監視をセットアップします:
データベースでは、データの更新をリアルタイムで取得するようにリスナーを設定します。具体的な実装方法はデータベースによって異なりますが、ここではFirebaseを例に説明します。まず、Firebase コンソールで新しいプロジェクトを作成し、対応する構成情報を取得します。次に、firebase および firebase/app モジュールを React プロジェクトにインストールします。

npm install firebase
npm install firebase/app

React プロジェクトのエントリ ファイル (通常は src/index) .js )、Firebase を導入して初期化します:

import firebase from 'firebase/app';
import 'firebase/database';

const firebaseConfig = {
  // 你的 Firebase 配置信息
};

firebase.initializeApp(firebaseConfig);
const database = firebase.database();

次に、database.ref() を使用して Firebase データベースのルート参照を取得し、on を呼び出します。 () リスナーを設定する方法:

const dataRef = database.ref('data');

dataRef.on('value', (snapshot) => {
  const data = snapshot.val();
  // 数据更新操作
});

3. React Query を使用する:
データベース リスナーを設定したので、React Query を使用してデータをサブスクライブおよびパブリッシュしましょう。まず、新しい React Query インスタンスを作成し、それをコンポーネント ツリーのルート コンポーネントにします。

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

const queryClient = new QueryClient();

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

関連するモジュールを src/index.js にインポートしてください。次に、useQuery フックを介してデータをサブスクライブできます。

import { useQuery } from 'react-query';

const App = () => {
  const query = useQuery('data', () => {
    // 获取数据的逻辑
  });

  // 渲染数据
  return (
    <div>
      {query.isLoading ? (
        'Loading...'
      ) : query.error ? (
        'An error occurred: ' + query.error.message
      ) : (
        // 渲染数据
      )}
    </div>
  );
};

このうち、useQuery は 2 つのパラメーターを受け入れます。最初のパラメーターはクエリ ID (文字列または配列)、2 番目のパラメーターはデータを取得する論理関数です。

データのリアルタイム更新を実現するには、useQuery の 2 番目のパラメーター関数で onSnapshot メソッドを呼び出し、データを に注入します。 queryClient 中:

import { useQuery } from 'react-query';

const App = () => {
  const query = useQuery('data', async () => {
    const snapshot = await dataRef.once('value');
    const data = snapshot.val();
    queryClient.setQueryData('data', data); // 注入数据到 queryClient 中
    return data;
  });

  // 渲染数据
  return (
    <div>
      {query.isLoading ? (
        'Loading...'
      ) : query.error ? (
        'An error occurred: ' + query.error.message
      ) : (
        // 渲染数据
      )}
    </div>
  );
};

最後に、useMutation フックを使用してデータの変更を公開することもできます。

import { useMutation } from 'react-query';

const App = () => {
  const mutation = useMutation((newData) => {
    // 更新数据的逻辑
  });

  // 发布数据
  const handlePublish = () => {
    mutation.mutate(newData);
  };

  return (
    <div>
      {/* ... */}
      <button onClick={handlePublish}>Publish</button>
    </div>
  );
};

Created through the useMutation フックmutation オブジェクトは、データ変更をトリガーするために使用できる mutate メソッドを提供します。

結論:
この記事では、React Query とデータベースを使用してデータのサブスクリプションとパブリッシングを実装する方法を紹介します。まず、リアルタイムでデータ更新を取得するためにデータベース リスナーを設定します。次に、React Query の useQuery フックを使用してデータをサブスクライブし、useMutation フックを使用してデータへの変更を公開します。この記事が、実際のプロジェクトでデータのサブスクリプションとパブリッシュを実装する際の参考になれば幸いです。

参考リンク:

• React Query ドキュメント: https://react-query.tanstack.com/
• Firebase ドキュメント: https://firebase.google .com/docs

以上がReact Query とデータベースを使用してデータのサブスクリプションとパブリッシュを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。