Plugin de base de données React Query : un guide pour travailler avec des systèmes distribués

React Query est une bibliothèque de gestion de données frontale couramment utilisée qui peut nous aider à gérer les données des applications et fournit de puissantes fonctions de requête de données, de mise en cache et de mise à jour. Cependant, lorsque notre application doit collaborer avec un système de base de données distribué sur le backend, nous pouvons avoir besoin d'un plugin de base de données à intégrer à React Query. Cet article explique comment utiliser le plugin de base de données React Query pour travailler avec des systèmes distribués et fournit des exemples de code détaillés.

Le plug-in de base de données React Query est une couche intermédiaire créée pour interagir avec le système de base de données back-end. Sa fonction principale est d'intercepter les demandes de requêtes de données et de mise à jour et de les transmettre au système de base de données back-end. Lorsqu'il s'agit d'interroger des données, le plugin de base de données est chargé d'obtenir les données et de les renvoyer à React Query. En termes de mises à jour des données, le plug-in de base de données est chargé d'envoyer les demandes de mise à jour au système de base de données principal et de renvoyer les données mises à jour à React Query. De cette façon, nous pouvons intégrer React Query à n'importe quel système de base de données distribué pour interroger, mettre en cache et mettre à jour les données.

Ci-dessous, nous prendrons comme exemple la collaboration avec la base de données Firebase pour présenter en détail comment utiliser le plug-in de base de données React Query.

Tout d'abord, nous devons installer et importer les plugins React Query et Firebase. Saisissez les commandes suivantes sur la ligne de commande pour installer React Query et Firebase :

npm install react-query firebase

Importez les plug-ins React Query et Firebase dans le fichier d'entrée de l'application :

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

const firebaseConfig = {...}; // Firebase 配置
const queryClient = new QueryClient();

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

Dans le code ci-dessus, nous créons une instance QueryClient et enveloppons l'intégralité chose avec l'application QueryClientProvider. Ensuite, nous utilisons ReactQueryFirebaseProvider pour envelopper le composant App et transmettre les informations de configuration Firebase.

Ensuite, nous devons créer un hook React Query personnalisé pour obtenir les données de la base de données Firebase.

import { useQuery } from 'react-query';
import { firestore } from 'firebase';

const useFirebaseQuery = (collectionPath) => {
  return useQuery(collectionPath, async () => {
    const querySnapshot = await firestore().collection(collectionPath).get();
    return querySnapshot.docs.map((doc) => doc.data());
  });
};

export default useFirebaseQuery;

Dans le code ci-dessus, nous avons créé un hook personnalisé useFirebaseQuery à l'aide du hook useQuery pour obtenir des données de la base de données Firebase. Ce hook accepte un paramètre collectionPath, qui représente le chemin de la collection à interroger. Dans l'implémentation du hook, nous utilisons la méthode firestore() de Firebase pour obtenir l'instantané de requête de la collection, convertir les données du document dans l'instantané en un tableau et le renvoyer. De cette façon, nous pouvons utiliser le hook useFirebaseQuery dans le composant pour obtenir les données :

import useFirebaseQuery from './hooks/useFirebaseQuery';

const App = () => {
  const { data, status } = useFirebaseQuery('users');

  if (status === 'loading') {
    return <div>Loading...</div>;
  }

  if (status === 'error') {
    return <div>Error fetching data</div>;
  }

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

Dans le code ci-dessus, nous utilisons le hook useFirebaseQuery pour obtenir les données de la collection nommée « utilisateurs ». En fonction de l'état des données, nous restituons différents composants.

Enfin, nous devons envoyer la demande de mise à jour des données au système de base de données backend lors de la mise à jour des données. Dans le composant, nous utilisons le hook useMutation pour mettre à jour les données, puis envoyons la demande de mise à jour dans la fonction de mutation.

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

const useFirebaseMutation = (collectionPath) => {
  const queryClient = useQueryClient();

  return useMutation(
    async (data) => {
      await firestore().collection(collectionPath).add(data);
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries(collectionPath);
      },
    }
  );
};

export default useFirebaseMutation;

Dans le code ci-dessus, nous utilisons le hook useMutation pour créer un hook personnalisé useFirebaseMutation pour envoyer des demandes de mise à jour des données. Ce hook accepte un paramètre collectionPath, qui représente le chemin de la collection à mettre à jour. Dans la fonction de mutation, nous utilisons la méthode firestore() de Firebase pour ajouter de nouvelles données de document à la collection. Une fois les données mises à jour avec succès, nous utilisons la méthode queryClient.invalidateQueries pour invalider toutes les requêtes qui correspondent au chemin de collecte.

Ce qui suit est un exemple de code pour utiliser le hook useFirebaseMutation pour mettre à jour les données dans un composant :

import useFirebaseMutation from './hooks/useFirebaseMutation';

const AddUserForm = () => {
  const { mutate } = useFirebaseMutation('users');

  const handleSubmit = (event) => {
    event.preventDefault();

    const name = event.target.elements.name.value;
    const email = event.target.elements.email.value;

    mutate({ name, email });

    event.target.reset();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Name" required />
      <input type="email" name="email" placeholder="Email" required />
      <button type="submit">Add User</button>
    </form>
  );
};

Dans le code ci-dessus, nous utilisons le hook useFirebaseMutation pour créer une fonction de mutation permettant d'envoyer une demande de mise à jour des données. Lorsque le formulaire est soumis, nous obtenons le nom et l'adresse e-mail de l'utilisateur à ajouter à partir de l'élément du formulaire et appelons la fonction mutate pour mettre à jour les données.

Grâce aux étapes ci-dessus, nous avons collaboré avec succès avec des systèmes de bases de données distribuées (tels que Firebase) basés sur l'utilisation du plug-in de base de données React Query. Nous pouvons utiliser le hook useFirebaseQuery pour obtenir des données et le hook useFirebaseMutation pour mettre à jour les données. De cette façon, nous pouvons gérer les données de l'application plus facilement et collaborer efficacement avec le système de base de données back-end.

Cet article fournit un exemple d'intégration avec le système de base de données Firebase, mais vous pouvez également intégrer le plugin de base de données React Query à d'autres systèmes de base de données distribués. Implémentez simplement la fonction hook appropriée conformément à la documentation API de la base de données principale pour collaborer avec la base de données.

En bref, le plugin de base de données React Query est un outil puissant qui peut nous aider à gérer facilement les données de l'application et à collaborer avec le système de base de données distribué sur le backend. Grâce à l'intégration avec React Query, nous pouvons développer et maintenir nos applications plus efficacement et offrir une meilleure expérience utilisateur.

J'espère que cet article vous aidera à comprendre comment utiliser le plugin de base de données React Query pour collaborer avec des systèmes distribués. Bonne chance avec l'utilisation de React Query et des plugins de 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!