Guide d'intégration de la base de données React Query : tutoriel de démarrage rapide

Guide d'intégration de la base de données React Query : tutoriel de démarrage rapide

Introduction :
React Query est une puissante bibliothèque de requêtes de données qui fournit un moyen simple et efficace de gérer et d'interroger les données d'application. Son concept de conception est basé sur Hooks, ce qui rend son utilisation très simple dans les applications React. Dans ce guide, nous nous concentrerons sur l'intégration de React Query à une base de données pour permettre une interrogation et une mise à jour rapides des données.

1. Installez et configurez React Query
Tout d'abord, nous devons installer React Query. Ouvrez un terminal et exécutez la commande suivante dans le répertoire de votre projet :

npm install react-query

Une fois l'installation terminée, nous devons configurer le fournisseur pour React Query dans le composant racine de l'application. Dans votre composant racine, ajoutez le code suivant :

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用程序组件 */}
    </QueryClientProvider>
  );
}

Maintenant, votre application React intègre React Query !

2. Créer une couche d'intégration de base de données
Ensuite, nous créerons une couche d'intégration de base de données pour gérer nos opérations de données. Nous utiliserons une API de base de données hypothétique pour notre exemple. Dans votre projet, créez un fichier nommé api.js et ajoutez le code suivant : api.js 的文件，并添加以下代码：

export async function fetchUsers() {
  // 发送请求获取用户数据
}

export async function deleteUser(id) {
  // 发送请求删除指定 id 的用户
}

export async function updateUser(id, data) {
  // 发送请求更新指定 id 的用户数据
}

export async function createUser(data) {
  // 发送请求创建新用户
}

在这个文件中，我们分别定义了获取用户、删除用户、更新用户和创建用户的函数。根据你的实际情况，你可能需要调整这些函数的实现细节。

三、使用 React Query 进行数据查询
现在我们可以开始使用 React Query 进行数据查询了。在你的组件中，导入所需的 Hooks，并使用它们来查询数据。以下是一个查询用户列表的示例：

import { useQuery } from 'react-query';

import { fetchUsers } from './api';

function UserList() {
  const { data, isLoading, isError } = useQuery('users', fetchUsers);

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

  if (isError) {
    return <div>Error occurred while fetching data.</div>;
  }

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

在这个示例中，我们使用 useQuery Hook 来查询用户数据。第一个参数是一个字符串，用于标识查询的键值。第二个参数是一个函数，在其中调用我们之前定义的 fetchUsers 函数来获取用户数据。useQuery Hook 将返回一个包含查询结果的对象，我们可以从中获取数据、加载状态和错误状态。

四、使用 React Query 进行数据更新
除了查询数据，React Query 还提供了用于更新数据的 Hook。在你的组件中，导入 useMutation Hook 并使用它来更新用户数据。以下是一个更新用户的示例：

import { useMutation } from 'react-query';

import { updateUser } from './api';

function UserForm({ user }) {
  const mutation = useMutation((data) => updateUser(user.id, data));

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

    const formData = new FormData(event.target);
    const userData = Object.fromEntries(formData.entries());

    mutation.mutate(userData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" defaultValue={user.name} />
      <input type="text" name="email" defaultValue={user.email} />
      <button type="submit" disabled={mutation.isLoading}>
        {mutation.isLoading ? 'Saving...' : 'Save'}
      </button>
    </form>
  );
}

在这个示例中，我们使用 useMutation Hook 来进行用户数据的更新。我们将 updateUser 函数传递给 useMutation，它将返回一个包含 mutate 函数的对象。我们在表单提交时调用 mutation.mutaterrreee

Dans ce fichier, nous définissons respectivement les fonctions Get User, Supprimer l'utilisateur, Mettre à jour l'utilisateur et Créer un utilisateur. En fonction de votre situation réelle, vous devrez peut-être ajuster les détails de mise en œuvre de ces fonctions.

3. Utilisez React Query pour la requête de données

Nous pouvons maintenant commencer à utiliser React Query pour la requête de données. Dans votre composant, importez les Hooks requis et utilisez-les pour interroger les données. Voici un exemple d'interrogation d'une liste d'utilisateurs : 🎜rrreee🎜Dans cet exemple, nous utilisons le Hook useQuery pour interroger les données utilisateur. Le premier paramètre est une chaîne qui identifie la valeur clé de la requête. Le deuxième paramètre est une fonction dans laquelle nous appelons la fonction fetchUsers que nous avons définie précédemment pour obtenir les données utilisateur. Le Hook useQuery renverra un objet contenant les résultats de la requête à partir duquel nous pourrons obtenir les données, l'état de chargement et l'état d'erreur. 🎜🎜4. Utilisez React Query pour la mise à jour des données🎜En plus d'interroger les données, React Query fournit également des Hooks pour la mise à jour des données. Dans votre composant, importez le hook useMutation et utilisez-le pour mettre à jour les données utilisateur. Voici un exemple de mise à jour d'un utilisateur : 🎜rrreee🎜Dans cet exemple, nous utilisons useMutation Hook pour mettre à jour les données utilisateur. Nous passons la fonction updateUser à useMutation et elle renverra un objet contenant la fonction mutate. Nous appelons la fonction mutation.mutate lorsque le formulaire est soumis, en lui transmettant les données du formulaire en paramètre, déclenchant ainsi la mise à jour des données. 🎜🎜Conclusion : 🎜Ce guide présente comment intégrer React Query et la base de données dans les applications React pour obtenir une requête et une mise à jour rapides des données. En suivant les étapes ci-dessus, vous pouvez facilement commencer à tirer parti de React Query pour la gestion des données. J'espère que cet article 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!