Implement data subscription and publishing using React Query and database

Use React Query and database to implement data subscription and publishing

Introduction:
In modern front-end development, real-time updating and communication of data is a very important part . React Query is an excellent data layer management library that provides powerful data query and caching capabilities. Combined with the real-time monitoring function of the database, we can easily implement data subscription and publishing. This article will introduce how to use React Query and database to implement data subscription and publishing, and give corresponding code examples.

1. Environment preparation:
Before starting the implementation, make sure that the environment we need is ready. First, we need a suitable backend database, such as MongoDB, Firebase, etc. Second, we need to create a React application and install React Query. You can create and initialize a new React application with the following command:

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

Next, install React Query:

npm install react-query

2. Set up database monitoring:
In the database, we need Set up a listener to get updates to the data in real time. The specific implementation method varies from database to database. Here we take Firebase as an example. First, create a new project in the Firebase console and obtain the corresponding configuration information. Then, install the firebase and firebase/app modules in the React project:

npm install firebase
npm install firebase/app

In the entry file of the React project (usually src/index.js ), introduce Firebase and initialize:

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

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

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

Next, we can use database.ref() to get the root reference of the Firebase database and call on () Method to set up the listener:

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

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

3. Use React Query:
Now that we have set up the database listener, let's use React Query to subscribe and publish data. First, create a new React Query instance and make it the root component of the component tree:

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

const queryClient = new QueryClient();

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

Please make sure to import the relevant modules in src/index.js. Then, we can subscribe to the data through the useQuery hook:

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>
  );
};

Among them, useQuery accepts two parameters, the first parameter is the query ID (can be a string or array), the second parameter is the logical function to get the data.

In order to achieve real-time updating of data, we can call the onSnapshot method in the second parameter function of useQuery and inject the data into queryClient Medium:

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>
  );
};

Finally, we can also publish data changes through the useMutation hook:

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 hookmutation The object provides the mutate method, which can be used to trigger data changes.

Conclusion:
This article introduces how to use React Query and the database to implement data subscription and publishing. First, we set up a database listener to get data updates in real time. Then, we use React Query’s useQuery hook to subscribe to the data, and use the useMutation hook to publish changes to the data. I hope this article has provided some help for you to implement data subscription and publishing in actual projects.

Reference link:

• React Query documentation: https://react-query.tanstack.com/
• Firebase documentation: https://firebase.google .com/docs

The above is the detailed content of Implement data subscription and publishing using React Query and database. For more information, please follow other related articles on the PHP Chinese website!