Comment implémenter des opérations par lots de base de données dans React Query

Dans React Query, nous devons souvent effectuer des opérations par lots avec la base de données backend. Cet article présentera comment implémenter des opérations par lots sur la base de données dans React Query et le démontrera à travers des exemples de code spécifiques.

React Query est une bibliothèque permettant de gérer l'état des données et de gérer les demandes de données. Il aide les développeurs à gérer facilement les interactions avec les bases de données back-end et fournit une variété de fonctionnalités puissantes.

Tout d’abord, nous devons installer et configurer React Query. Il peut être installé avec la commande suivante :

npm install react-query

Ensuite, il faut configurer React Query dans le fichier d'entrée de l'application. Le code suivant peut être utilisé :

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用程序的其他组件和逻辑 */}
    </QueryClientProvider>
  );
}

export default App;

Ensuite, nous implémenterons des opérations batch sur la base de données. Supposons que nous ayons une fonction de gestion des utilisateurs et que nous devions supprimer les utilisateurs sélectionnés par lots. Nous pouvons le faire en suivant ces étapes :

1. Créez une fonction de demande pour obtenir une liste d'utilisateurs. Il peut être défini à l'aide du code suivant :

import axios from 'axios';

const getUsers = async () => {
  const response = await axios.get('/api/users');
  return response.data;
};

2. Utilisez le hook useQuery de React Query pour obtenir les données de la liste d'utilisateurs. Ceci peut être réalisé en utilisant le code suivant :

import { useQuery } from 'react-query';

const UserList = () => {
  const { data, isLoading } = useQuery('users', getUsers);

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

  // 渲染用户列表的逻辑
};

3. Créez une fonction de demande de suppression d'un utilisateur. Il peut être défini à l'aide du code suivant :

import axios from 'axios';

const deleteUser = async (id) => {
  await axios.delete(`/api/users/${id}`);
};

4. Utilisez le hook useMutation de React Query pour gérer la suppression d'un utilisateur. Ceci peut être réalisé en utilisant le code suivant :

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

const UserList = () => {
  // 其他代码...

  const queryClient = useQueryClient();

  const deleteMutation = useMutation(deleteUser, {
    onSuccess: () => {
      queryClient.invalidateQueries('users');
    },
  });

  const handleDelete = (id) => {
    deleteMutation.mutate(id);
  };

  // 渲染用户列表的逻辑
};

Dans le code ci-dessus, nous utilisons le hook useQueryClient pour obtenir une instance de QueryClient et appelons la méthode invalidateQueries pour invalider les données de la liste d'utilisateurs afin que nous puissions réobtenir la dernière lister les données après avoir supprimé l’utilisateur.

Enfin, nous rendons le bouton de suppression dans la liste des utilisateurs et l'associons à la fonction handleDelete. Cela peut être réalisé en utilisant le code suivant :

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

const UserList = () => {
  // 其他代码...

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>
          {user.name}{' '}
          <button onClick={() => handleDelete(user.id)}>删除</button>
        </li>
      ))}
    </ul>
  );
};

Grâce aux étapes ci-dessus, nous avons implémenté avec succès des opérations par lots sur la base de données, en particulier la suppression d'utilisateurs. Lorsque vous cliquez sur le bouton Supprimer, la fonction handleDelete sera appelée pour déclencher l'opération de suppression et mettre à jour automatiquement les données de la liste d'utilisateurs.

Pour résumer, React Query fournit des outils faciles à utiliser et puissants pour gérer les opérations par lots avec des bases de données backend. En utilisant le hook useMutation pour gérer la fonction de requête et le rappel une fois l'opération réussie, nous pouvons facilement implémenter diverses opérations de base de données. Le code de l'exemple ci-dessus est uniquement à titre de référence. Dans le développement réel, il peut être nécessaire de l'ajuster et de l'étendre en fonction de besoins spécifiques. J'espère que cet article pourra vous aider à mieux comprendre et utiliser la méthode d'opération par lots de base de données dans 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!