Comment réaliser une réplication instantanée de la base de données dans React Query ?

Comment implémenter la réplication instantanée de bases de données dans React Query ?

Introduction :
Dans le développement d'applications modernes, la réplication en temps réel des bases de données est souvent impliquée. La réplication instantanée signifie que lorsque des ajouts, des suppressions et des modifications se produisent dans la base de données, les dernières données peuvent être automatiquement synchronisées avec l'application. React Query est un outil puissant de gestion des données d'application, fournissant de nombreuses fonctionnalités utiles pour gérer la récupération, la mise à jour et la mise en cache des données. Cet article explique comment utiliser React Query pour obtenir une réplication instantanée de la base de données et fournit des exemples de code spécifiques.

Étape 1 : Installer et configurer React Query
Tout d’abord, nous devons installer React Query et le configurer. Exécutez la commande suivante dans le terminal :

npm install react-query

Ensuite, importez React Query dans le fichier d'entrée de l'application et utilisez le composant QueryClientProvider pour fournir l'objet global QueryClient. L'exemple de code est le suivant :

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

const queryClient = new QueryClient();

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

Étape 2 : Définir les fonctions de requête et de mise à jour
Ensuite, nous devons définir les fonctions de requête et de mise à jour. Les fonctions de requête sont utilisées pour obtenir les dernières données de la base de données, tandis que les fonctions de mise à jour sont utilisées pour insérer, mettre à jour ou supprimer des données dans la base de données. L'exemple de code est le suivant :

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

// 查询函数
const fetchItems = async () => {
  const response = await fetch('/api/items');
  return response.json();
};

// 更新函数
const updateItem = async (item) => {
  const response = await fetch(`/api/items/${item.id}`, {
    method: 'PATCH',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(item),
  });
  return response.json();
};

Étape 3 : Utilisez useQuery et useMutation
Maintenant, nous pouvons utiliser les hooks useQuery et useMutation dans le composant pour obtenir et mettre à jour les données. L'exemple de code est le suivant :

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

const ItemList = () => {
  // 获取最新的数据
  const { data: items } = useQuery('items', fetchItems);

  // 创建更新函数
  const mutation = useMutation(updateItem, {
    onSuccess: () => {
      queryClient.invalidateQueries('items');
    },
  });

  // 提交数据更新
  const handleSubmit = () => {
    const item = {
      id: 1,
      name: 'New Item',
    };
    mutation.mutate(item);
  };

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <button onClick={handleSubmit}>添加新项目</button>
    </div>
  );
};

Dans l'exemple de code ci-dessus, nous utilisons le hook useQuery pour obtenir les dernières données et le hook useMutation pour créer la fonction de mise à jour. Lorsque les données sont mises à jour avec succès, nous invalidons la requête et déclenchons la nouvelle récupération des données en appelant queryClient.invalidateQueries('items').

Résumé :
En utilisant React Query, nous pouvons facilement réaliser une réplication instantanée de la base de données. Tout d’abord, nous devons installer et configurer React Query, et définir les fonctions de requête et de mise à jour. Ensuite, nous pouvons utiliser les hooks useQuery et useMutation dans le composant pour obtenir et mettre à jour les données. La réplication instantanée de la base de données peut être obtenue en appelant la méthode queryClient.invalidateQueries dans le rappel onSuccess de la fonction de mise à jour. De cette façon, nous pouvons facilement réaliser une synchronisation et une mise à jour instantanées des données.

Ce qui précède est une introduction détaillée et des exemples de code sur la façon d'implémenter la réplication instantanée de la base de données dans React Query. J'espère que cet article pourra aider les lecteurs à mieux comprendre et appliquer React Query pour réaliser la fonction de réplication instantanée de la base de données.

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!