React Query とデータベースを使用してデータのサブスクリプションとパブリッシュを実装する-jsチュートリアル-php.cn

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

WBOY

リリース： 2023-09-28 11:49:52

オリジナル

1061 人が閲覧しました

利用 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 フックを使用してデータへの変更を公開します。この記事が、実際のプロジェクトでデータのサブスクリプションとパブリッシュを実装する際の参考になれば幸いです。

参考リンク: