Comment utiliser les requêtes de base de données avec React Query ?

Comment utiliser la requête de base de données dans React Query ?

Introduction : React Query est une puissante bibliothèque de gestion d'état, qui constitue un excellent choix pour gérer les requêtes réseau et la mise en cache des données dans les applications React. Il fournit un moyen simple mais puissant de gérer les requêtes de données, nous permettant d'interagir facilement avec la base de données. Cet article donnera des exemples de code détaillés sur la façon d'utiliser les requêtes de base de données avec React Query.

1. Préparation
Avant de commencer, assurez-vous que React Query est installé et qu'il existe une base de données disponible que nous pouvons utiliser. Cela suppose que notre base de données est MongoDB, mais vous pouvez utiliser d'autres types de bases de données.

2. Créer un client React Query
Tout d'abord, nous devons créer un client React Query pour gérer nos requêtes de données. Dans le fichier d'entrée du projet (généralement index.js), importez QueryClient et QueryClientProvider, puis créez un objet client React Query global, puis transmettez vers QueryClientProvider : index.js）中，导入 QueryClient 和 QueryClientProvider，并创建一个全局的 React Query 客户端对象，然后将其传递给 QueryClientProvider：

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

const queryClient = new QueryClient();

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

三、定义数据库查询函数
在开始使用数据库查询之前，我们需要将数据库查询封装为一个可重复使用的函数。这个函数可以接受查询参数，并返回一个 Promise，从而允许我们在 React Query 中使用异步函数。下面是一个示例数据库查询函数：

async function fetchDataFromDatabase(queryParams) {
  return await fetch('/api/query', {
    method: 'POST',
    body: JSON.stringify(queryParams),
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => response.json())
  .then(data => {
    // 处理从数据库获取的数据
    return data;
  })
  .catch(error => {
    // 处理错误
    throw new Error('数据库查询失败');
  });
}

这个函数是一个异步函数，它使用 fetch API 发起一个 POST 请求到后端的 /api/query 接口，并将查询参数作为请求体发送。然后，它将获取到的响应数据解析为 JSON，并在成功时返回数据，否则抛出一个错误。

四、在 React Query 中使用数据库查询
现在我们已经有了一个可重复使用的数据库查询函数，接下来我们可以在组件中使用 React Query 进行数据查询了。

首先，导入 useQuery 钩子函数，并使用它创建一个查询。我们将使用 useQuery 钩子函数来进行数据获取，并传递一个查询键（通常是一个字符串），以及一个用于触发查询的函数。

import { useQuery } from 'react-query';

function App() {
  const { data, isLoading, error } = useQuery('fetchData', fetchDataFromDatabase);
  
  if (isLoading) {
    return <div>Loading...</div>;
  }
  
  if (error) {
    return <div>Error: {error.message}</div>;
  }
  
  return (
    <div>
      {/* 显示从数据库获取的数据 */}
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

在上面的代码中，我们使用了一个叫做 fetchData 的查询键，并将 fetchDataFromDatabase 函数作为查询函数传递给 useQuery。useQuery 钩子函数将返回一个包含 data、isLoading 和 error 等属性的对象，我们可以根据这些属性来处理不同的状态。

通过上述代码，我们可以根据 isLoading 状态来显示一个加载中的提示信息，通过 error 状态来显示一个错误信息，并通过 data 状态来渲染从数据库获取的数据。

五、渲染在 React Query 中的数据
对于从数据库获取的数据，我们可以在组件中使用 data 状态进行渲染。在上述示例中，我们将从数据库获取的每个数据项渲染为一个包含 id 和 name 的 divrrreee

3. Définir la fonction de requête de base de données

Avant de commencer à utiliser la requête de base de données, nous devons encapsuler la requête de base de données dans une fonction réutilisable. Cette fonction peut accepter des paramètres de requête et renvoyer une promesse, nous permettant d'utiliser des fonctions asynchrones dans React Query. Voici un exemple de fonction de requête de base de données :

rrreee

Cette fonction est une fonction asynchrone qui utilise l'API fetch pour lancer une requête POST vers l'interface /api/query du backend. et Envoyer les paramètres de requête en tant que corps de la requête. Il analyse ensuite les données de réponse qu'il obtient dans JSON et renvoie les données en cas de succès, sinon il génère une erreur.

4. Utiliser la requête de base de données dans React Query

Maintenant que nous disposons d'une fonction de requête de base de données réutilisable, nous pouvons utiliser React Query dans le composant pour interroger des données.

🎜Tout d'abord, importez la fonction hook useQuery et utilisez-la pour créer une requête. Nous utiliserons la fonction hook useQuery pour la récupération de données, en transmettant une clé de requête (généralement une chaîne) et une fonction pour déclencher la requête. 🎜rrreee🎜Dans le code ci-dessus, nous utilisons une clé de requête appelée fetchData et transmettons la fonction fetchDataFromDatabase comme fonction de requête à useQuery . La fonction hook useQuery renverra un objet contenant des propriétés telles que data, isLoading et error. Nous pouvons les utiliser. propriétés pour gérer différents états. 🎜🎜Grâce au code ci-dessus, nous pouvons afficher un message d'invite de chargement en fonction de l'état isLoading, afficher un message d'erreur via l'état error et afficher un message d'erreur via le État data pour restituer les données obtenues à partir de la base de données. 🎜🎜5. Données rendues dans React Query🎜Pour les données obtenues à partir de la base de données, nous pouvons utiliser l'état <code>data dans le composant à restituer. Dans l'exemple ci-dessus, nous rendons chaque élément de données extrait de la base de données sous la forme d'un élément div contenant id et name. 🎜🎜Ceci n'est qu'un exemple simple, vous pouvez effectuer un rendu de données plus complexe en fonction des besoins de votre application. 🎜🎜6. Résumé🎜En utilisant React Query, nous pouvons facilement utiliser des requêtes de base de données dans les applications React. Dans cet article, nous avons d'abord créé un client React Query, puis défini une fonction de requête de base de données réutilisable et l'avons utilisée dans le composant React Query. Enfin, nous avons appris à gérer les messages de chargement et d'erreur en fonction des différents statuts de requête et à restituer les données extraites de la base de données. 🎜🎜J'espère que cet article pourra vous aider à mieux comprendre comment utiliser les requêtes de base de données dans React Query, et vous fournir quelques idées et références pour le développement de votre projet. Bon développement avec React Query ! 🎜

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!