Gestion des données avec React Query et bases de données : un guide des meilleures pratiques

Gestion des données avec React Query et Database : Guide des meilleures pratiques

Citation :
Dans le développement front-end moderne, la gestion des données est une tâche très importante. Alors que les exigences des utilisateurs en matière de hautes performances et de stabilité continuent d'augmenter, nous devons réfléchir à la manière de mieux organiser et gérer les données des applications. React Query est un outil de gestion de données puissant et facile à utiliser qui offre un moyen simple et flexible de gérer la récupération, la mise à jour et la mise en cache des données. Cet article explique les meilleures pratiques de gestion des données à l'aide de React Query et d'une base de données, et fournit des exemples de code spécifiques.

1. Installer React Query et les dépendances associées
Tout d'abord, nous devons installer React Query et les dépendances associées. Ces packages peuvent être installés à l'aide de npm ou de fil.

$ npm install react-query react-router-dom

2. Configurez React QueryProvider
Dans le fichier d'entrée, nous devons ajouter React QueryProvider à l'application. Le React QueryProvider est chargé de fournir un contexte lié à la gestion des données aux composants de votre application.

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

const queryClient = new QueryClient();

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

3. Lancer une demande de requête
Dans React Query, nous pouvons utiliser le hook useQuery pour lancer une demande de requête. Le premier paramètre du hook useQuery est une chaîne représentant la clé des données à obtenir. Le deuxième paramètre est une fonction asynchrone, utilisée pour obtenir réellement les données.

import { useQuery } from 'react-query';

function UserList() {
  const { isLoading, data, error } = useQuery('users', async () => {
    const response = await fetch('/api/users');
    const data = await response.json();
    return data;
  });

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

  if (error) {
    return <div>Error: {error.message}</div>;
  }

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

4. Mettre à jour les données
En plus d'obtenir des données, React Query fournit également le hook useMutation pour gérer les mises à jour des données. Le hook useMutation accepte une fonction asynchrone qui est utilisée pour mettre à jour les données. Il renvoie un tableau dont le premier élément est une fonction qui déclenche l'opération de mise à jour. De plus, nous pouvons utiliser certaines options pour contrôler son comportement lors du lancement d'une demande de mise à jour.

import { useMutation } from 'react-query';

function UpdateUserForm({ user }) {
  const mutation = useMutation(updatedUser => {
    return fetch(`/api/users/${user.id}`, {
      method: 'PUT',
      body: JSON.stringify(updatedUser),
    });
  });

  const handleSubmit = event => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const updatedUser = {
      name: formData.get('name'),
      age: formData.get('age'),
    };
    mutation.mutate(updatedUser);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" defaultValue={user.name} />
      <input type="number" name="age" defaultValue={user.age} />
      <button type="submit">Update</button>
    </form>
  );
}

5. Mise en cache des données
React Query mettra automatiquement en cache les données interrogées par défaut et les mettra à jour si nécessaire. Nous pouvons utiliser le hook useQueryClient et la méthode queryClient.setQueryData pour mettre à jour les données manuellement. Identifiez et mettez à jour les données par clés interrogées.

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

function UserList() {
  const queryClient = useQueryClient();

  const { isLoading, data, error } = useQuery('users', async () => {
    const response = await fetch('/api/users');
    const data = await response.json();
    return data;
  });

  const handleUpdateUser = user => {
    // update the data in the cache
    queryClient.setQueryData('users', old => {
      const updatedData = old.map(u => {
        if (u.id === user.id) {
          return {
            ...u,
            name: user.name,
            age: user.age,
          };
        }
        return u;
      });
      return updatedData;
    });
  };

  // ...
}

6. Utilisation de la base de données
React Query ne limite pas la méthode que nous utilisons pour obtenir des données. Si nos données sont stockées dans la base de données, il nous suffit d'écrire le code correspondant dans la fonction de requête pour faire fonctionner la base de données.

import { useQuery } from 'react-query';
import { db } from 'path/to/database';

function UserList() {
  const { isLoading, data, error } = useQuery('users', async () => {
    const users = await db.get('users');
    return users;
  });

  // ...
}

Seven.Résumé
En utilisant React Query et la base de données, nous pouvons mieux organiser et gérer les données dans l'application et offrir une bonne expérience utilisateur. Cet article fournit des conseils sur les meilleures pratiques pour la gestion des données à l'aide de React Query, avec des exemples de code concrets. J'espère que cela vous aidera !

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!