Implementieren Sie das Abonnieren und Veröffentlichen von Daten mithilfe von React Query und der Datenbank

Verwenden Sie React Query und die Datenbank, um das Abonnieren und Veröffentlichen von Daten zu implementieren

Einführung:
In der modernen Front-End-Entwicklung ist die Aktualisierung und Kommunikation von Daten in Echtzeit ein sehr wichtiger Bestandteil. React Query ist eine hervorragende Bibliothek zur Datenschichtverwaltung, die leistungsstarke Datenabfrage- und Caching-Funktionen bietet. In Kombination mit der Echtzeitüberwachungsfunktion der Datenbank können wir problemlos Datenabonnements und -veröffentlichungen implementieren. In diesem Artikel wird die Verwendung von React Query und der Datenbank zum Implementieren von Datenabonnements und -veröffentlichungen vorgestellt und entsprechende Codebeispiele gegeben.

1. Umgebungsvorbereitung:
Bevor Sie mit der Implementierung beginnen, stellen Sie sicher, dass die von uns benötigte Umgebung bereit ist. Zunächst benötigen wir eine geeignete Backend-Datenbank, wie MongoDB, Firebase usw. Zweitens müssen wir eine React-Anwendung erstellen und React Query installieren. Mit dem folgenden Befehl können Sie eine neue React-Anwendung erstellen und initialisieren:

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

Als nächstes installieren Sie React Query:

npm install react-query

2. Datenbank-Listening einrichten:
In der Datenbank müssen wir einen Listener einrichten, um Daten in Echtzeit zu erhalten Zeit erneuern. Die spezifische Implementierungsmethode variiert von Datenbank zu Datenbank. Hier nehmen wir Firebase als Beispiel. Erstellen Sie zunächst ein neues Projekt in der Firebase-Konsole und rufen Sie die entsprechenden Konfigurationsinformationen ab. Installieren Sie dann die Module firebase und firebase/app im React-Projekt: firebase 和 firebase/app 模块：

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();
  // 数据更新操作
});

三、使用 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 接受两个参数，第一个参数是查询标识（可以是字符串或数组），第二个参数是获取数据的逻辑函数。

为了实现数据的实时更新，我们可以在 useQuery 的第二个参数函数中调用 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>
  );
};

通过 useMutation 钩子创建的 mutation 对象提供了 mutate 方法，可以用来触发数据的变更。

结束语：
本文介绍了如何利用 React Query 和数据库实现数据的订阅和发布。首先，我们设置了数据库的监听器，以实时获取数据的更新。然后，我们使用 React Query 的 useQuery 钩子来订阅数据，并通过 useMutationrrreee

In der Eintragsdatei des React-Projekts (normalerweise src/index.js code>), führen Sie Firebase ein und initialisieren Sie es:

rrreee

Als nächstes können wir database.ref() verwenden, um die Stammreferenz der Firebase-Datenbank abzurufen und on( aufzurufen ) code> Methode zum Einrichten des Listeners: <ul>rrreee<li> 3. Verwenden Sie React Query: </li>Da wir nun den Datenbank-Listener eingerichtet haben, verwenden wir React Query, um Daten zu abonnieren und zu veröffentlichen. Erstellen Sie zunächst eine neue React Query-Instanz und machen Sie sie zur Stammkomponente des Komponentenbaums: <li>rrreee</li> Stellen Sie sicher, dass Sie die relevanten Module in <code>src/index.js importieren. Dann können wir die Daten über den useQuery-Hook abonnieren: rrreee🎜 Unter diesen akzeptiert useQuery zwei Parameter, der erste Parameter ist die Abfrage-ID (kann eine Zeichenfolge sein). oder Array), der zweite Parameter ist die logische Funktion zum Abrufen der Daten. 🎜🎜Um eine Aktualisierung der Daten in Echtzeit zu erreichen, können wir die Methode onSnapshot in der zweiten Parameterfunktion von useQuery aufrufen und die Daten in queryClient Medium: 🎜rrreee🎜Schließlich können wir auch Datenänderungen über den <code>useMutation-Hook veröffentlichen: 🎜rrreee🎜mutation Objekte, die durch den useMutationerstellt wurden > Hook Es wird die Methode mutate bereitgestellt, mit der Datenänderungen ausgelöst werden können. 🎜🎜Fazit: 🎜In diesem Artikel wird erläutert, wie Sie React Query und die Datenbank zum Abonnieren und Veröffentlichen von Daten verwenden. Zuerst richten wir einen Datenbank-Listener ein, um Datenaktualisierungen in Echtzeit abzurufen. Anschließend verwenden wir den Hook useQuery von React Query, um die Daten zu abonnieren, und verwenden den Hook useMutation, um Änderungen an den Daten zu veröffentlichen. Ich hoffe, dieser Artikel hat Ihnen bei der Implementierung von Datenabonnements und der Veröffentlichung in tatsächlichen Projekten geholfen. 🎜🎜Referenzlinks: 🎜🎜🎜React Query-Dokumentation: https://react-query.tanstack.com/🎜🎜Firebase-Dokumentation: https://firebase.google.com/docs🎜🎜

Das obige ist der detaillierte Inhalt vonImplementieren Sie das Abonnieren und Veröffentlichen von Daten mithilfe von React Query und der Datenbank. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!