Implémenter une nouvelle tentative échouée de requêtes de base de données dans React Query

Implémenter les nouvelles tentatives échouées des requêtes de base de données dans React Query

React Query est une puissante bibliothèque de requêtes de données et de gestion d'état, qui peut nous aider à gérer facilement les tâches de requête de données et de gestion d'état. Dans les applications réelles, nous rencontrons souvent des échecs de requêtes de base de données. À l'heure actuelle, nous devons implémenter un mécanisme de nouvelle tentative d'échec automatique pour améliorer la stabilité des requêtes. Cet article explique comment implémenter les nouvelles tentatives échouées des requêtes de base de données dans React Query et fournit des exemples de code spécifiques.

Dans React Query, nous pouvons utiliser des hooks de requête pour effectuer des requêtes de base de données. Dans le hook Query, nous pouvons définir une requête en spécifiant queryKey et queryFn. queryKey est une clé unique qui identifie le nom de la requête, tandis que queryFn est une fonction asynchrone qui effectue l'opération de requête réelle. Lorsque nous appelons le hook Query, React Query exécutera automatiquement queryFn et stockera les résultats de la requête dans le cache global.

Pour implémenter les nouvelles tentatives échouées des requêtes de base de données, nous pouvons utiliser le rappel onError de React Query. Lorsque queryFn génère une erreur, React Query déclenche automatiquement le rappel onError. Nous pouvons implémenter une logique de nouvelle tentative dans le rappel onError. Voici un exemple de code :

import { useQuery } from 'react-query';

const fetchUser = async (userId) => {
  const response = await fetch(`https://example.com/api/users/${userId}`);
  if (!response.ok) {
    throw new Error('Failed to fetch user');
  }
  return response.json();
};

const User = ({ userId }) => {
  const queryKey = ['user', userId];

  const { data, isError, error } = useQuery(queryKey, fetchUser, {
    retry: 3,
    retryDelay: 1000,
    onError: (error, key, config) => {
      console.error('An error occurred:', error);
    },
  });

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

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
    </div>
  );
};

export default User;

Dans le code ci-dessus, nous définissons une fonction asynchrone nommée fetchUser pour interroger les informations utilisateur. Lorsqu'une requête échoue, nous renvoyons une erreur personnalisée. Ensuite, nous implémentons la logique de nouvelle tentative dans le hook Query en définissant les paramètres retry et retryDelay. Le paramètre retry spécifie le nombre de tentatives et le paramètre retryDelay spécifie le délai entre chaque nouvelle tentative. Nous traitons également les informations d'erreur via le rappel onError, qui peut imprimer les journaux d'erreurs sur la console ou effectuer d'autres traitements.

En utilisant l'exemple de code ci-dessus, nous pouvons interroger les informations utilisateur en appelant le composant User dans le composant React. Si la requête échoue, React Query effectuera automatiquement une logique de nouvelle tentative et réessayera jusqu'à 3 fois avec un intervalle de 1 seconde à chaque fois. Lorsque le nombre de tentatives dépasse la limite, la propriété isError devient vraie et nous pouvons gérer les informations d'erreur dans le composant, comme l'affichage d'une invite d'erreur.

Résumé :
En utilisant le rappel onError de React Query, nous pouvons facilement implémenter la logique de nouvelle tentative échouée des requêtes de base de données. Générez une erreur dans la fonction de requête spécifique, puis gérez les informations d'erreur et déclenchez l'opération de nouvelle tentative dans le rappel onError. Cela peut améliorer la stabilité de la requête et garantir l'exactitude des données. Dans le même temps, React Query fournit également d'autres paramètres de configuration flexibles, tels que le nombre de tentatives et l'intervalle de nouvelle tentative, qui peuvent être ajustés en fonction de la situation réelle.

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!