Plugin React Query Database : le guide ultime pour l'intégration avec les API backend

Plugin de base de données React Query : le guide ultime pour l'intégration avec les API backend

Citation :
Dans les applications Web modernes, l'interaction des données avec les API backend est essentielle. React Query est une bibliothèque de gestion des données et de l'état, qui facilite l'intégration et l'utilisation des API backend dans les applications React. Cet article explique comment utiliser le plug-in de base de données React Query pour effectuer des opérations CRUD sur les données et fournit des exemples de code spécifiques.

1. Introduction au plug-in de base de données React Query
Le plug-in de base de données React Query est une fonction importante de la bibliothèque React Query, qui permet d'intégrer les opérations de base de données avec les API back-end. Le plug-in fournit des fonctions pratiques et faciles à utiliser, telles que la mise en cache automatique des données lors de l'interrogation de données, l'actualisation automatique du cache, la mise à jour automatique du cache lorsque les données changent, etc. Ces fonctionnalités simplifient considérablement le processus d'interaction des données avec les API back-end, améliorant ainsi les performances des applications et l'efficacité du développement.

2. Installation et configuration du plug-in
Avant de commencer à utiliser le plug-in de base de données React Query, vous devez d'abord installer la bibliothèque React Query. Dans le répertoire du projet, ouvrez un terminal et exécutez la commande suivante pour installer React Query :

npm install react-query

Une fois l'installation terminée, introduisez React Query dans l'application :

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

const queryClient = new QueryClient();

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

3. Créez des hooks API
Le plug-in de base de données React Query utilise des API Hooks pour définir et publier l'interaction avec l'API. API Hooks est un React Hook personnalisé qui encapsule la logique d'interaction des données avec l'API back-end. Voici un exemple d'API Hook utilisant le plugin de base de données React Query :

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

const fetchUsers = async () => {
  const response = await fetch('/api/users');
  return response.json();
};

const createUser = async (user) => {
  const response = await fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(user),
  });
  return response.json();
};

const useUsers = () => {
  return useQuery('users', fetchUsers);
};

const useCreateUser = () => {
  return useMutation(createUser);
};

export { useUsers, useCreateUser };

Dans l'exemple ci-dessus, nous avons défini un API Hook nommé useUsers qui utilise useQueryPour interroger données utilisateur. Nous définissons également un Hook API nommé useCreateUser, qui utilise useMutation pour créer des données utilisateur. useUsers的API Hook，它使用useQuery来查询用户数据。我们还定义了一个名为useCreateUser的API Hook，它使用useMutation来创建用户数据。

四、在组件中使用API Hooks
在React组件中使用API Hooks非常简单。以下是一个使用上述API Hooks的示例：

import { useUsers, useCreateUser } from './api';

const UserList = () => {
  const { data: users, isLoading, isError } = useUsers();

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

  if (isError) {
    return <div>Error loading users.</div>;
  }

  return (
    <div>
      {users.map((user) => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
};

const CreateUserForm = () => {
  const createUser = useCreateUser();

  const handleSubmit = async (event) => {
    event.preventDefault();
    const form = event.target;
    const user = {
      name: form.name.value,
      email: form.email.value,
    };

    try {
      await createUser.mutateAsync(user);
      form.reset();
    } catch (error) {
      console.error('Error creating user:', error);
    }
  };

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

在上述示例中，我们在UserList组件中使用了useUsersAPI Hook来检索用户数据，并根据数据的加载状态显示相关信息。我们还在CreateUserForm组件中使用了useCreateUser

4. Utiliser les Hooks API dans les composants

L'utilisation des Hooks API dans les composants React est très simple. Voici un exemple utilisant les Hooks API ci-dessus :
rrreee

Dans l'exemple ci-dessus, nous avons utilisé le Hook API useUsers dans le composant UserList pour récupérer les données utilisateur et en fonction du data L'état de chargement affiche des informations pertinentes. Nous utilisons également le hook API useCreateUser dans le composant CreateUserForm pour créer des données utilisateur. 🎜🎜5. Conclusion🎜Grâce au plug-in de base de données React Query, nous pouvons facilement intégrer l'API back-end et utiliser les fonctions de mise en cache et de mise à jour automatique qu'elle fournit pour créer rapidement un système de gestion de données efficace. Cet article explique comment installer, configurer et utiliser le plug-in de base de données React Query à travers des exemples de code spécifiques. J'espère que cet article pourra vous aider à mieux comprendre et utiliser le plugin de base de données React Query. Je vous souhaite une bonne utilisation ! 🎜

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!