Maison > interface Web > js tutoriel > le corps du texte

Comment réaliser la séparation de la lecture et de l'écriture dans la base de données dans React Query ?

WBOY
Libérer: 2023-09-26 09:22:59
original
1063 Les gens l'ont consulté

如何在 React Query 中实现数据库的读写分离?

Comment implémenter la séparation en lecture et en écriture de la base de données dans React Query ?

Dans le développement front-end moderne, la séparation de la lecture et de l'écriture dans la base de données est une considération importante en matière de conception architecturale. React Query est une puissante bibliothèque de gestion d'état qui optimise le processus d'acquisition et de gestion de données pour les applications frontales. Cet article explique comment utiliser React Query pour obtenir la séparation des lectures et des écritures dans la base de données et fournit des exemples de code spécifiques.

Les concepts de base de React Query sont Query, Mutation et QueryClient. La requête est utilisée pour obtenir des données, la mutation est utilisée pour modifier les données et QueryClient est utilisé pour gérer et suivre l'état des requêtes et des mutations. Nous pouvons utiliser ces concepts pour réaliser la séparation de la lecture et de l'écriture dans la base de données.

Tout d'abord, nous devons configurer deux clients API différents, un pour lire les données et l'autre pour écrire des données. Nous pouvons utiliser des bibliothèques comme axios ou fetch pour créer ces clients API. Voici un exemple de code :

import axios from 'axios';

const readApiClient = axios.create({
  baseURL: 'https://api.read.com',
});

const writeApiClient = axios.create({
  baseURL: 'https://api.write.com',
});

export { readApiClient, writeApiClient };
Copier après la connexion

Ensuite, nous pouvons configurer ces deux clients dans notre application à l'aide des composants QueryProvider et MutationProvider de React Query. QueryProvider est utilisé pour configurer le client qui lit les données et MutationProvider est utilisé pour configurer le client qui écrit des données. Voici un exemple de code :

import { QueryClient, QueryProvider, MutationProvider } from 'react-query';
import { readApiClient, writeApiClient } from './api';

const queryClient = new QueryClient();

ReactDOM.render(
  <QueryProvider client={queryClient}>
    <MutationProvider client={writeApiClient}>
      <App />
    </MutationProvider>
  </QueryProvider>,
  document.getElementById('root')
);
Copier après la connexion

Désormais, nous pouvons utiliser les hooks useQuery et useMutation de React Query pour envoyer des requêtes de lecture et d'écriture de données dans les composants de l'application. Voici un exemple de code :

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

const fetchUser = async () => {
  const response = await readApiClient.get('/users/1');
  return response.data;
};

const updateUser = async (userData) => {
  const response = await writeApiClient.put('/users/1', userData);
  return response.data;
};

const Profile = () => {
  const { data, isLoading } = useQuery('user', fetchUser);
  const mutation = useMutation(updateUser, {
    onSuccess: () => {
      queryClient.invalidateQueries('user');
    },
  });

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

  return (
    <div>
      <h1>{data.name}</h1>
      <button onClick={() => mutation.mutate({ name: 'John Doe' })}>
        Update Name
      </button>
    </div>
  );
};
Copier après la connexion

Dans le code ci-dessus, nous avons utilisé le hook useQuery pour obtenir les données utilisateur et le hook useMutation pour mettre à jour les données utilisateur. Après une mise à jour réussie, nous utilisons la méthode queryClient.invalidateQueries pour invalider la requête afin de récupérer les dernières données utilisateur.

Grâce aux étapes ci-dessus, nous avons réussi à séparer la lecture et l'écriture dans la base de données. À l'aide des composants QueryProvider et MutationProvider de React Query, nous pouvons configurer différents clients API pour les opérations de lecture et d'écriture, réalisant ainsi la séparation de la lecture et de l'écriture dans la base de données. Dans le même temps, en utilisant les hooks useQuery et useMutation, nous pouvons facilement envoyer des requêtes de lecture et d'écriture de données dans le composant, et effectuer la gestion de l'état et les mises à jour.

Pour résumer, React Query est une puissante bibliothèque de gestion d'état qui peut nous aider à optimiser le processus d'acquisition et de gestion de données des applications frontales. En configurant correctement différents clients API et en utilisant les hooks QueryProvider, MutationProvider, useQuery et useMutation, nous pouvons réaliser une séparation lecture-écriture de la base de données dans React Query. Ceci est très important pour créer des applications frontales efficaces et évolutives.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!