Implémenter l'abonnement et la publication de données à l'aide de React Query et de la base de données

Utilisez React Query et la base de données pour mettre en œuvre l'abonnement et la publication de données

Introduction :
Dans le développement front-end moderne, la mise à jour et la communication des données en temps réel sont une partie très importante. React Query est une excellente bibliothèque de gestion de couche de données qui offre de puissantes capacités de requête de données et de mise en cache. Combiné à la fonction de surveillance en temps réel de la base de données, nous pouvons facilement mettre en œuvre l'abonnement et la publication des données. Cet article expliquera comment utiliser React Query et la base de données pour implémenter l'abonnement et la publication de données, et donnera des exemples de code correspondants.

1. Préparation de l'environnement :
Avant de commencer la mise en œuvre, assurez-vous que l'environnement dont nous avons besoin est prêt. Tout d’abord, nous avons besoin d’une base de données backend appropriée, telle que MongoDB, Firebase, etc. Deuxièmement, nous devons créer une application React et installer React Query. Vous pouvez créer et initialiser une nouvelle application React avec la commande suivante :

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

Ensuite, installez React Query :

npm install react-query

2. Configurer l'écoute de la base de données :
Dans la base de données, nous devons configurer un auditeur pour obtenir les données en temps réel. le temps se renouvelle. La méthode d'implémentation spécifique varie d'une base de données à l'autre. Nous prenons ici Firebase comme exemple. Tout d'abord, créez un nouveau projet dans la console Firebase et obtenez les informations de configuration correspondantes. Ensuite, installez les modules firebase et firebase/app dans le projet React : 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

Dans le fichier d'entrée du projet React (généralement src/index.js code>), introduisez Firebase et initialisez-le :

rrreee

Ensuite, nous pouvons utiliser database.ref() pour obtenir la référence racine de la base de données Firebase et appeler on( ) code> pour configurer l'écouteur : <ul>rrreee<li> 3. Utilisez React Query : </li>Maintenant que nous avons configuré l'écouteur de base de données, utilisons React Query pour nous abonner et publier des données. Tout d'abord, créez une nouvelle instance de React Query et faites-en le composant racine de l'arborescence des composants : <li>rrreee</li> Assurez-vous d'importer les modules pertinents dans <code>src/index.js. Ensuite, on peut s'abonner aux données via le hook useQuery : rrreee🎜 Parmi eux, useQuery accepte deux paramètres, le premier paramètre est l'identifiant de la requête (peut être une chaîne ou array ), le deuxième paramètre est la fonction logique pour obtenir les données. 🎜🎜Afin de réaliser une mise à jour des données en temps réel, nous pouvons appeler la méthode onSnapshot dans la deuxième fonction paramètre de useQuery et injecter les données dans queryClient Medium : 🎜rrreee🎜Enfin, nous pouvons également publier les modifications de données via le hook <code>useMutation : 🎜rrreee🎜mutation objets créés via useMutation hook La méthode mutate est fournie, qui peut être utilisée pour déclencher des modifications de données. 🎜🎜Conclusion : 🎜Cet article explique comment utiliser React Query et la base de données pour s'abonner et publier des données. Tout d’abord, nous avons configuré un écouteur de base de données pour obtenir des mises à jour des données en temps réel. Nous utilisons ensuite le hook useQuery de React Query pour nous abonner aux données, et utilisons le hook useMutation pour publier les modifications apportées aux données. J'espère que cet article vous a aidé à mettre en œuvre l'abonnement et la publication de données dans des projets réels. 🎜🎜Liens de référence : 🎜🎜🎜Documentation React Query : https://react-query.tanstack.com/🎜🎜Documentation Firebase : https://firebase.google.com/docs🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!