Utilisez le plug-in de base de données React Query pour réaliser une synchronisation automatique des données

Utilisez le plug-in de base de données React Query pour réaliser une synchronisation automatique des données

À mesure que le développement front-end devient de plus en plus complexe, la gestion des données devient de plus en plus importante. React Query est un puissant plug-in de base de données qui nous offre une gestion pratique de l'état des données et des fonctions de synchronisation automatique. Dans cet article, nous explorerons comment tirer parti de React Query pour la synchronisation automatique des données et fournirons des exemples de code spécifiques.

1. Comprendre React Query

React Query est une bibliothèque axée sur la gestion et la synchronisation des données. Elle est construite sur la base de React et fournit une API facile à utiliser et des fonctions puissantes. Le concept principal de React Query est la requête. Une requête peut demander des données distantes, enregistrer les données localement et gérer automatiquement le chargement, la mise en cache et la synchronisation des données. Dans le même temps, React Query fournit également des mécanismes clairs de gestion de l’état des données et de gestion des erreurs. Ceux-ci nous permettent de traiter les données plus simplement et plus efficacement.

2. Implémentation de la synchronisation automatique des données

1. Installation de React Query

Tout d'abord, nous devons installer React Query dans le projet. Il peut être installé via npm ou Yarn :

npm install react-query
# 或者
yarn add react-query

Une fois l'installation terminée, importez React Query dans le composant racine de l'application :

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

2. Create QueryClient

Créez une instance QueryClient dans l'application pour gérer les demandes de données et leur statut :

const queryClient = new QueryClient();

et enveloppez-le dans un QueryClientProvider pour accéder aux fonctionnalités fournies par QueryClient dans toute l'application :

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

3. Déclaration d'une requête

Dans les composants qui doivent utiliser des données, nous pouvons utiliser le hook useQuery pour déclarer une requête. useQuery reçoit une clé de requête et une fonction asynchrone pour récupérer les données du serveur distant :

import { useQuery } from 'react-query';

function MyComponent() {
  const { data, isLoading } = useQuery('todos', fetchTodos);

  if (isLoading) {
    return <LoadingSpinner />;
  }

  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

async function fetchTodos() {
  const response = await fetch('/api/todos');
  const data = await response.json();
  return data;
}

Dans cet exemple, nous déclarons une requête nommée "todos", qui appelle la fonction fetchTodos du serveur Get to-do data. Pendant le chargement des données, affichez une flèche de chargement ; une fois le chargement terminé, affichez la liste de tâches.

4. Mettre à jour les données

React Query peut gérer automatiquement le chargement et la mise en cache des données pour nous, mais le maintien des données en temps réel nécessite un traitement manuel des mises à jour des données. Nous pouvons utiliser le hook useMutation pour implémenter facilement des opérations de mise à jour des données.

import { useMutation } from 'react-query';

function MyComponent() {
  const { data, isLoading } = useQuery('todos', fetchTodos);
  const mutation = useMutation(updateTodo);

  async function handleUpdate(id, status) {
    await mutation.mutateAsync({ id, status });
  }

  if (isLoading) {
    return <LoadingSpinner />;
  }

  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>
          {todo.title}
          <button onClick={() => handleUpdate(todo.id, 'completed')}>
            完成
          </button>
        </li>
      ))}
    </ul>
  );
}

async function updateTodo({ id, status }) {
  await fetch(`/api/todos/${id}`, {
    method: 'PUT',
    body: JSON.stringify({ status }),
    headers: { 'Content-Type': 'application/json' },
  });
}

Dans cet exemple, nous utilisons le hook useMutation pour déclarer une variable appelée mutation qui contient une fonction appelée lorsque les données sont mises à jour. Déclenchez la fonction handleUpdate en cliquant sur le bouton, complétez la tâche correspondante et envoyez une demande de mise à jour au serveur.

5. Synchroniser automatiquement les données

React Query fournit également une fonction de synchronisation automatique, qui nous permet de mettre à jour automatiquement l'interface lorsque les données changent. Nous pouvons utiliser les options refetchOnMount et refetchInterval dans l'élément de configuration useQuery pour déclencher automatiquement la requête et la mise à jour des données.

function MyComponent() {
  const { data, isLoading } = useQuery('todos', fetchTodos, {
    refetchOnMount: true,
    refetchInterval: 3000, // 每 3 秒自动更新一次数据
  });

  // ...
}

Dans cet exemple, nous définissons refetchOnMount sur true, ce qui signifie qu'une requête de données sera déclenchée lorsque le composant est monté pour la première fois. Dans le même temps, nous définissons refetchInterval sur 3000, ce qui signifie qu'une requête de données sera déclenchée toutes les 3 secondes pour réaliser une mise à jour automatique des données.

3. Résumé

En utilisant le plug-in de base de données React Query, nous pouvons facilement implémenter la fonction de synchronisation automatique des données. Cet article présente brièvement l'utilisation de base de React Query et fournit des exemples de code spécifiques. J'espère que cet article pourra vous aider à mieux comprendre et utiliser React Query et à jouer un rôle dans des projets réels.

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!