Laksanakan langganan dan penerbitan data menggunakan React Query dan pangkalan data

Gunakan React Query dan pangkalan data untuk melaksanakan langganan dan penerbitan data

Pengenalan:
Dalam pembangunan front-end moden, pengemaskinian masa nyata dan komunikasi data adalah bahagian yang sangat penting. React Query ialah perpustakaan pengurusan lapisan data yang sangat baik yang menyediakan pertanyaan data yang berkuasa dan keupayaan caching. Digabungkan dengan fungsi pemantauan masa nyata pangkalan data, kami boleh melaksanakan langganan dan penerbitan data dengan mudah. Artikel ini akan memperkenalkan cara menggunakan React Query dan pangkalan data untuk melaksanakan langganan dan penerbitan data serta memberikan contoh kod yang sepadan.

1. Persediaan persekitaran:
Sebelum memulakan pelaksanaan, pastikan persekitaran yang kita perlukan sudah sedia. Pertama, kami memerlukan pangkalan data bahagian belakang yang sesuai, seperti MongoDB, Firebase, dsb. Kedua, kita perlu mencipta aplikasi React dan memasang React Query. Anda boleh mencipta dan memulakan aplikasi React baharu dengan arahan berikut:

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

Seterusnya, pasang React Query:

npm install react-query

2. Sediakan mendengar pangkalan data:
Dalam pangkalan data, kita perlu menyediakan pendengar untuk mendapatkan data secara sebenar memperbaharui masa. Kaedah pelaksanaan khusus berbeza dari pangkalan data ke pangkalan data Di sini kami mengambil Firebase sebagai contoh. Mula-mula, buat projek baharu dalam konsol Firebase dan dapatkan maklumat konfigurasi yang sepadan. Kemudian, pasang modul firebase dan firebase/app dalam projek 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

Dalam fail entri projek React (biasanya src/index.js code>), perkenalkan Firebase dan mulakannya:

rrreee

Seterusnya, kita boleh menggunakan database.ref() untuk mendapatkan rujukan akar pangkalan data Firebase dan memanggil on( ) code> kaedah untuk menyediakan pendengar: <ul>rrreee<li> 3. Gunakan React Query: </li>Sekarang kita telah menyediakan pendengar pangkalan data, mari gunakan React Query untuk melanggan dan menerbitkan data. Mula-mula, buat contoh React Query baharu dan jadikan ia komponen akar pepohon komponen: <li>rrreee</li> Pastikan anda mengimport modul yang berkaitan dalam <code>src/index.js. Kemudian, kita boleh melanggan data melalui cangkuk useQuery: rrreee🎜 Antaranya, useQuery menerima dua parameter, parameter pertama ialah pengecam pertanyaan (boleh menjadi rentetan atau tatasusunan ), parameter kedua ialah fungsi logik untuk mendapatkan data. 🎜🎜Untuk mencapai kemas kini data masa nyata, kami boleh memanggil kaedah onSnapshot dalam fungsi parameter kedua useQuery dan menyuntik data ke dalam queryClient Medium: 🎜rrreee🎜Akhir sekali, kami juga boleh menerbitkan perubahan data melalui cangkuk <code>useMutation: 🎜rrreee🎜mutation objek yang dibuat melalui useMutation cangkuk Kaedah mutate disediakan, yang boleh digunakan untuk mencetuskan perubahan data. 🎜🎜Kesimpulan: 🎜Artikel ini memperkenalkan cara menggunakan React Query dan pangkalan data untuk melanggan dan menerbitkan data. Pertama, kami menyediakan pendengar pangkalan data untuk mendapatkan kemas kini data dalam masa nyata. Kami kemudian menggunakan cangkuk useQuery React Query untuk melanggan data dan menggunakan cangkuk useMutation untuk menerbitkan perubahan pada data. Saya harap artikel ini telah memberikan sedikit bantuan untuk anda melaksanakan langganan dan penerbitan data dalam projek sebenar. 🎜🎜Pautan rujukan: 🎜🎜🎜React Query dokumentasi: https://react-query.tanstack.com/🎜🎜Firebase documentation: https://firebase.google.com/docs🎜🎜

Atas ialah kandungan terperinci Laksanakan langganan dan penerbitan data menggunakan React Query dan pangkalan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!