Comment ajouter, supprimer, modifier et interroger des données dans React Query ?

Comment ajouter, supprimer, modifier et interroger des données dans React Query ?

Dans le développement Web moderne, l'architecture de séparation front-end et back-end est largement utilisée. En tant que développeurs front-end, nous devons généralement interagir avec les données back-end, notamment en ajoutant (Créer), en supprimant (Supprimer), en mettant à jour (Mettre à jour) et en interrogeant (Requête) des données. Afin de simplifier ces opérations et d'améliorer l'efficacité du développement, la bibliothèque React Query est devenue un choix populaire. Cet article explique comment utiliser React Query pour ajouter, supprimer, modifier et interroger des données.

React Query est une bibliothèque de gestion d'état qui se concentre sur la gestion des données asynchrones. Il fournit un ensemble puissant d'outils et d'API pour récupérer, mettre à jour et supprimer des données, ainsi que pour gérer automatiquement la mise en cache et l'invalidation des données.

Tout d'abord, nous devons installer et configurer React Query. Vous pouvez installer React Query à l'aide de la commande suivante :

npm install react-query

ou

yarn add react-query

Ensuite, ajoutez le fournisseur de requêtes React dans le composant racine de votre application :

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

const queryClient = new QueryClient();

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

Ensuite, voyons comment implémenter les données dans React Query Add. , supprimez, modifiez et vérifiez.

Créer/ajouter des données

Pour créer de nouvelles données, nous pouvons utiliser le hook useMutation. Ce hook reçoit une fonction en paramètre, qui sert à envoyer la requête et à créer de nouvelles données. Cette fonction doit renvoyer une promesse et être résolue une fois les données créées avec succès. useMutation hook。这个 hook 接收一个函数作为参数，用于发送请求并创建新的数据。这个函数必须返回 Promise，并在数据创建成功后进行 resolve。

import { useMutation } from 'react-query';

function CreateData() {
  const { mutate, isLoading } = useMutation((data) =>
    fetch('/api/data', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
      },
    }).then((res) => res.json())
  );

  const handleCreate = () => {
    mutate({ name: 'New Data' }); // 传递新数据到 mutate 函数
  };

  return (
    <div>
      <button onClick={handleCreate} disabled={isLoading}>
        {isLoading ? 'Creating...' : 'Create Data'}
      </button>
    </div>
  );
}

在上面的代码中，我们使用了 useMutation hook 来创建一个名为 CreateData 的组件。mutate 函数用于触发请求并创建新的数据。在这个例子中，我们发送一个 POST 请求到 /api/data 地址，并将新的数据作为请求的正文。请求成功后，通过调用 res.json() 方法来解析响应，并在 Promise resolve 后返回数据。

删除数据

要删除数据，我们可以再次使用 useMutation hook，并发送一个 DELETE 请求。类似于创建数据的例子，我们需要传递一个删除的函数，并在函数返回结果为成功后 resolve。

import { useMutation } from 'react-query';

function DeleteData({ dataId }) {
  const { mutate, isLoading } = useMutation(() =>
    fetch(`/api/data/${dataId}`, {
      method: 'DELETE',
    }).then((res) => res.json())
  );

  const handleDelete = () => {
    mutate();
  };

  return (
    <div>
      <button onClick={handleDelete} disabled={isLoading}>
        {isLoading ? 'Deleting...' : 'Delete Data'}
      </button>
    </div>
  );
}

在上面的代码中，我们定义了一个名为 DeleteData 的组件，并使用 useMutation hook 创建了一个删除函数。这个函数发送一个 DELETE 请求到 /api/data/{dataId} 地址，其中 {dataId} 是要删除的数据的唯一标识符。请求成功后，我们将结果作为 Promise resolve 返回。

更新数据

要更新数据，我们可以再次使用 useMutation hook，发送一个 PUT 或者 PATCH 请求。类似于创建数据和删除数据的例子，我们需要传递一个函数用于更新数据，并在函数返回结果为成功后 resolve。

import { useMutation } from 'react-query';

function UpdateData({ dataId }) {
  const { mutate, isLoading } = useMutation((data) =>
    fetch(`/api/data/${dataId}`, {
      method: 'PUT',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
      },
    }).then((res) => res.json())
  );

  const handleUpdate = () => {
    mutate({ name: 'Updated Data' });
  };

  return (
    <div>
      <button onClick={handleUpdate} disabled={isLoading}>
        {isLoading ? 'Updating...' : 'Update Data'}
      </button>
    </div>
  );
}

在上面的代码中，我们创建了一个名为 UpdateData 的组件，并使用 useMutation hook 创建了一个更新函数。这个函数发送一个 PUT 请求到 /api/data/{dataId} 地址，并将更新的数据作为请求的正文。请求成功后，我们将结果作为 Promise resolve 返回。

查询数据

要查询数据，在 React Query 中我们可以使用 useQuery hook。这个 hook 接收一个函数作为参数，并返回一个包含数据的对象。在函数中，我们发送一个 GET 请求，并在响应中解析数据。

import { useQuery } from 'react-query';

function GetData({ dataId }) {
  const { isLoading, error, data } = useQuery('data', () =>
    fetch(`/api/data/${dataId}`).then((res) => res.json())
  );

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

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

  return (
    <div>
      <h2>Data: {data.name}</h2>
    </div>
  );
}

在上面的代码中，我们使用了 useQuery hook 创建了一个名为 GetData 的组件。useQuery hook 接收一个字符串作为标识符，并在请求成功后自动缓存数据。我们发送一个 GET 请求到 /api/data/{dataId}rrreee

Dans le code ci-dessus, nous utilisons le hook useMutation pour créer un composant nommé CreateData. La fonction mutate est utilisée pour déclencher des requêtes et créer de nouvelles données. Dans cet exemple, nous envoyons une requête POST à ​​l'adresse /api/data et incluons les nouvelles données comme corps de la requête. Une fois la requête réussie, la réponse est analysée en appelant la méthode res.json() et les données sont renvoyées une fois la promesse résolue.

Supprimer des données🎜🎜Pour supprimer des données, nous pouvons à nouveau utiliser le hook useMutation et envoyer une requête DELETE. Semblable à l'exemple de création de données, nous devons transmettre une fonction de suppression et résoudre une fois que la fonction a renvoyé un résultat réussi. 🎜rrreee🎜Dans le code ci-dessus, nous avons défini un composant nommé DeleteData et créé une fonction de suppression à l'aide du hook useMutation. Cette fonction envoie une requête DELETE à l'adresse /api/data/{dataId}, où {dataId} est l'identifiant unique de la donnée à supprimer. Une fois la demande réussie, nous renvoyons le résultat sous forme de résolution de promesse. 🎜🎜Mettre à jour les données🎜🎜Pour mettre à jour les données, nous pouvons à nouveau utiliser le hook useMutation et envoyer une requête PUT ou PATCH. Semblable aux exemples de création et de suppression de données, nous devons transmettre une fonction pour mettre à jour les données et résoudre une fois que la fonction a réussi. 🎜rrreee🎜Dans le code ci-dessus, nous avons créé un composant appelé UpdateData et créé une fonction de mise à jour à l'aide du hook useMutation. Cette fonction envoie une requête PUT à l'adresse /api/data/{dataId} avec les données mises à jour comme corps de la requête. Une fois la demande réussie, nous renvoyons le résultat sous forme de résolution de promesse. 🎜🎜Interroger des données🎜🎜Pour interroger des données, nous pouvons utiliser le hook useQuery dans React Query. Ce hook reçoit une fonction en argument et renvoie un objet contenant les données. Au sein de la fonction, nous envoyons une requête GET et analysons les données dans la réponse. 🎜rrreee🎜Dans le code ci-dessus, nous avons utilisé le hook useQuery pour créer un composant nommé GetData. Le hook useQuery reçoit une chaîne comme identifiant et met automatiquement en cache les données après une requête réussie. Nous envoyons une requête GET à l'adresse /api/data/{dataId} et analysons les données dans la réponse. Lors du chargement des données, nous affichons un texte "Chargement..." Si une erreur se produit, nous affichons le texte de l'erreur. Sinon, nous affichons les données interrogées. 🎜🎜En résumé, nous avons appris à utiliser React Query pour ajouter, supprimer, modifier et interroger des données. React Query fournit de nombreux outils et API puissants pour simplifier la gestion et l'interaction des données. En utilisant ces outils et API, nous pouvons manipuler plus facilement les données et améliorer l'efficacité du développement front-end. J'espère que cet article pourra vous être utile ! 🎜

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!