Mises à jour des données en temps réel à l'aide du plugin de base de données React Query

Utilisez le plugin de base de données React Query pour les mises à jour des données en temps réel

React Query est un puissant outil de gestion de données qui peut nous aider à simplifier le processus de traitement des données dans les applications React. Il fournit des solutions élégantes pour des opérations telles que la récupération de données, la mise en cache et la mise à jour. Cet article explique comment utiliser le plug-in React Query pour implémenter la fonction de mise à jour des données en temps réel et fournit des exemples de code spécifiques.

Pour mieux comprendre ce processus, nous prendrons comme exemple une simple application de gestion de tâches. Supposons qu'il existe une liste de tâches dans l'application. Lorsque l'utilisateur termine une tâche, nous devons mettre à jour le statut de la tâche en temps réel.

Tout d'abord, nous devons installer le plugin React Query. Exécutez la commande suivante dans le terminal :

npm install react-query

Une fois l'installation terminée, nous pouvons introduire React Query dans le composant racine de l'application et créer une instance globale QueryClient. Le code est le suivant :

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用组件 */}
    </QueryClientProvider>
  );
}

export default App;

Ensuite, dans le composant où nous devons mettre à jour les données en temps réel, créez une opération de mise à jour des données en utilisant le hook useMutation fourni par React Query. Nous pouvons définir une logique de mise à jour dans le gestionnaire d'événements de clic du bouton d'achèvement de la tâche. Le code spécifique est le suivant :

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

function TaskItem({ task }) {
  const queryClient = useQueryClient();

  const completeTaskMutation = useMutation(async () => {
    // 发送异步请求完成任务
    await fetch(`/api/tasks/${task.id}`, { method: 'PUT', body: JSON.stringify({ completed: true }) });

    // 手动更新缓存
    queryClient.setQueryData(['tasks', task.id], { ...task, completed: true });
  });

  const handleCompleteClick = () => {
    completeTaskMutation.mutate();
  }

  return (
    <div>
      <p>{task.name}</p>
      <button onClick={handleCompleteClick}>完成</button>
    </div>
  );
}

Dans ce code, nous créons d'abord une variable nommée completeTaskMutation en appelant useMutation. Il s'agit d'un objet contenant une fonction de mutation, qui permet de déclencher des opérations de mise à jour des données.

Dans le gestionnaire d'événements de clic du bouton, nous appelons completeTaskMutation.mutate() pour déclencher la mise à jour des données. Cela appellera la fonction asynchrone que nous avons transmise dans useMutation et, après avoir terminé la requête asynchrone, mettra à jour manuellement les données dans le cache. Ici, nous utilisons la méthode setQueryData pour mettre à jour les données de tâche dans le cache et transmettons ['tasks', task.id] comme premier paramètre pour indiquer qu'il s'agit d'une opération de requête pour la liste des tâches.

Enfin, dans le composant liste de tâches, nous utilisons le hook useQuery pour obtenir les données de tâche. Le code est le suivant :

import { useQuery } from 'react-query';

function TaskList() {
  const { data } = useQuery('tasks', async () => {
    const response = await fetch('/api/tasks');
    const data = await response.json();
    return data;
  });

  return (
    <div>
      {data && data.map(task => (
        <TaskItem key={task.id} task={task} />
      ))}
    </div>
  );
}

Dans ce code, nous appelons useQuery('tasks', ...) pour lancer une opération de requête. Le premier paramètre est la clé utilisée pour identifier la requête, ici nous utilisons « tâches ». Le deuxième paramètre est une fonction asynchrone utilisée pour obtenir les données de la liste de tâches. Nous pouvons envoyer des requêtes asynchrones dans cette fonction et renvoyer des données de réponse. React Query mettra automatiquement en cache ces données et les mettra à jour si nécessaire.

Grâce aux exemples de code ci-dessus, nous avons utilisé avec succès le plug-in React Query pour implémenter la fonction de mise à jour des données en temps réel. Qu'il s'agisse de créer de nouvelles données, de mettre à jour des données ou de supprimer des données, React Query peut nous aider à gérer le processus d'acquisition et de mise à jour des données, simplifiant considérablement la complexité du traitement des données dans l'application. J'espère que cet article vous sera utile pour apprendre à utiliser React Query !

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!