Utilisez React Query et la base de données pour la sauvegarde des données et la reprise après sinistre

L'utilisation de React Query et de la base de données pour la sauvegarde des données et la reprise après sinistre, des exemples de code spécifiques sont nécessaires

Dans le développement Web moderne, la sauvegarde des données et la reprise après sinistre sont un élément crucial. Qu'il s'agisse de protéger les données des utilisateurs contre une suppression accidentelle ou une panne du système ou de pouvoir restaurer rapidement les données afin de maintenir la continuité des activités, la sauvegarde et la restauration des données sont essentielles.

React Query est une excellente bibliothèque de gestion de données qui offre de puissantes fonctionnalités de requête de données, de mise en cache et de mise à jour. En combinant React Query et la base de données, nous pouvons facilement mettre en œuvre des fonctions de sauvegarde des données et de reprise après sinistre.

Ce qui suit explique comment utiliser React Query et la base de données pour la sauvegarde des données et la reprise après sinistre, et donne des exemples de code spécifiques.

1. Sauvegarde des données

1. Configuration de la base de données

Tout d'abord, nous devons configurer une base de données pour stocker les données de sauvegarde. Les choix courants incluent MySQL, MongoDB, etc. Ici, nous prenons MySQL comme exemple pour illustrer.

Tout d’abord, installez MySQL et créez une base de données et des tables de sauvegarde. Vous pouvez utiliser l'instruction SQL suivante :

CREATE DATABASE IF NOT EXISTS backupdb;
USE backupdb;

CREATE TABLE IF NOT EXISTS backup_table (
  id INT PRIMARY KEY AUTO_INCREMENT,
  data TEXT,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. Créez un hook de requête React Query

Ensuite, créez un hook de requête React Query dans l'application React pour obtenir les données de sauvegarde de la base de données. Vous pouvez utiliser le code suivant :

import { useQuery } from 'react-query';

const fetchBackupData = async () => {
  const response = await fetch('/api/backupdata');
  const data = await response.json();
  return data;
};

const useBackupData = () => {
  return useQuery('backupData', fetchBackupData);
};

Dans le code ci-dessus, nous avons utilisé le hook useQuery pour lancer une requête asynchrone et implémenté l'interface API / dans le <code>fetchBackupData code> fonction La logique d'obtention des données de sauvegarde dans api/backupdata. useQuery 钩子来发起异步请求，并在 fetchBackupData 函数中实现了从 API 接口 /api/backupdata 中获取备份数据的逻辑。

3. 展示备份数据

最后，我们可以在组件中使用 useBackupData 钩子来展示备份数据。具体代码如下：

import React from 'react';
import { useBackupData } from './hooks/useBackupData';

const BackupData = () => {
  const { isLoading, error, data } = useBackupData();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h1>Backup Data</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.data}</li>
        ))}
      </ul>
    </div>
  );
};

export default BackupData;

上述代码中，我们在组件中使用 useBackupData 钩子来获取备份数据，并根据请求的状态展示相应的 UI。当数据正在加载时，显示 "Loading..."，当请求发生错误时，显示错误消息；当请求成功时，展示备份数据。

二、数据灾备

1. 创建灾备服务

为了实现数据灾备功能，我们需要创建一个灾备服务，该服务通过监听数据库的变化并实时备份数据。

可以使用如下代码来创建一个 Node.js 的灾备服务：

const mysql = require('mysql');
const backupdb = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'backupdb',
});

const createBackup = async () => {
  return new Promise((resolve, reject) => {
    backupdb.query('INSERT INTO backup_table (data) SELECT data FROM main_table', (error, results, fields) => {
      if (error) {
        reject(error);
      } else {
        resolve(results);
      }
    });
  });
};

const backupOnChange = () => {
  const maindb = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'maindb',
    multipleStatements: true,
  });

  maindb.query('SELECT @dummy := 0;');

  maindb.on('change', () => {
    createBackup()
      .then(() => {
        console.log('Backup created successfully');
      })
      .catch((error) => {
        console.error('Failed to create backup:', error);
      });
  });
};

backupOnChange();

上述代码中，我们首先创建了一个连接到 backupdb 的 MySQL 连接，然后定义了一个 createBackup 函数，用于将 main_table 中的数据插入到 backup_table 中。接着我们创建了一个连接到 maindb 的 MySQL 连接，并使用 change 事件监听数据库中数据的变化，当数据发生变化时，触发 createBackup 函数。

2. 前端通知灾备服务

最后一步是在前端代码中实现数据灾备的通知机制，以便在数据发生变化时，能够及时通知并触发数据备份。

可以使用如下代码来实现通知机制：

import { useMutation, useQueryClient } from 'react-query';

const notifyBackupService = async () => {
  const response = await fetch('/api/notifybackup', { method: 'POST' });
  const data = await response.json();
  return data;
};

const BackupData = () => {
  const queryClient = useQueryClient();
  const { mutate } = useMutation(notifyBackupService, {
    onSuccess: () => {
      queryClient.invalidateQueries('backupData');
      console.log('Backup service notified');
    },
    onError: (error) => {
      console.error('Failed to notify backup service:', error);
    },
  });

  return (
    <div>
      <h1>Backup Data</h1>
      <button onClick={() => mutate()}>Notify Backup Service</button>
    </div>
  );
};

上述代码中，我们使用了 useMutation 钩子来定义一个 notifyBackupService 函数，用于通知灾备服务。在 useMutation 钩子的选项参数中，我们通过 onSuccess 回调函数来刷新备份数据的查询，并打印通知成功的消息；通过 onError 回调函数来处理通知失败的情况，并打印错误消息。同时，我们在组件中添加了一个按钮，点击该按钮将触发 notifyBackupService

Afficher les données de sauvegarde

Enfin, nous pouvons utiliser le hook useBackupData dans le composant pour afficher les données de sauvegarde. Le code spécifique est le suivant :

rrreee🎜Dans le code ci-dessus, nous utilisons le hook useBackupData dans le composant pour obtenir les données de sauvegarde et afficher l'interface utilisateur correspondante en fonction de l'état demandé. Lors du chargement des données, "Chargement..." s'affiche. Lorsqu'une erreur se produit dans la requête, un message d'erreur s'affiche. Lorsque la requête réussit, les données de sauvegarde s'affichent. 🎜🎜2. Reprise après sinistre des données🎜🎜🎜Créer un service de reprise après sinistre🎜🎜🎜Afin de mettre en œuvre la fonction de reprise après sinistre des données, nous devons créer un service de reprise après sinistre qui surveille les modifications de la base de données et sauvegarde les données en temps réel. 🎜🎜Vous pouvez utiliser le code suivant pour créer un service de reprise après sinistre Node.js : 🎜rrreee🎜Dans le code ci-dessus, nous créons d'abord une connexion MySQL à backupdb, puis définissons un createBackup Fonction , utilisée pour insérer des données de main_table dans backup_table. Ensuite, nous avons créé une connexion MySQL à maindb et utilisé l'événement change pour surveiller les modifications des données dans la base de données. Lorsque les données changent, déclenchez createBackup code>. fonction. 🎜🎜🎜Service de reprise après sinistre avec notification frontale🎜🎜🎜La dernière étape consiste à implémenter le mécanisme de notification de reprise après sinistre des données dans le code frontal afin que lorsque les données changent, elles puissent être notifiées et déclencher une sauvegarde des données à temps. 🎜🎜Vous pouvez utiliser le code suivant pour implémenter le mécanisme de notification : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons le hook <code>useMutation pour définir une fonction notifyBackupService pour notifier le sinistre service de récupération. Dans les paramètres d'option du hook useMutation, nous utilisons la fonction de rappel onSuccess pour actualiser la requête des données de sauvegarde et imprimer un message notifiant le succès via onError ; Fonction de rappel pour gérer les échecs de notification et imprimer le message d'erreur. Dans le même temps, nous avons ajouté un bouton au composant. Cliquer sur le bouton déclenchera la fonction notifyBackupService pour avertir le service de reprise après sinistre. 🎜🎜Résumé : 🎜🎜En utilisant React Query et la base de données, nous pouvons facilement mettre en œuvre des fonctions de sauvegarde des données et de reprise après sinistre. Dans cet article, nous avons présenté comment utiliser les hooks de requête React Query pour obtenir des données de sauvegarde et montré des exemples de code spécifiques. Dans le même temps, nous avons également démontré comment créer un service de reprise après sinistre et mis en œuvre un mécanisme de notification pour la reprise après sinistre des données. J'espère que cet article vous aidera à comprendre comment utiliser React Query et la base de données pour la sauvegarde des données et la reprise après sinistre. 🎜

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!