Wie verwende ich Datenbankabfragen mit React Query?

Wie verwende ich eine Datenbankabfrage in React Query?

Einführung: React Query ist eine leistungsstarke Zustandsverwaltungsbibliothek, die sich hervorragend für die Verwaltung von Netzwerkanfragen und das Daten-Caching in React-Anwendungen eignet. Es bietet eine einfache, aber leistungsstarke Möglichkeit zur Bearbeitung von Datenabfragen und ermöglicht uns eine einfache Interaktion mit der Datenbank. In diesem Artikel finden Sie detaillierte Codebeispiele zur Verwendung von Datenbankabfragen mit React Query.

1. Vorbereitung
Bevor Sie beginnen, stellen Sie sicher, dass React Query installiert ist und eine Datenbank zur Verfügung steht. Dies setzt voraus, dass es sich bei unserer Datenbank um MongoDB handelt, Sie können jedoch auch andere Datenbanktypen verwenden.

2. Erstellen Sie einen React Query-Client
Zuerst müssen wir einen React Query-Client erstellen, um unsere Datenabfragen zu verwalten. Importieren Sie in der Eintragsdatei des Projekts (normalerweise index.js) QueryClient und QueryClientProvider, erstellen Sie ein globales React Query-Clientobjekt und übergeben Sie es dann it to 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. Definieren Sie die Datenbankabfragefunktion

Bevor wir mit der Verwendung der Datenbankabfrage beginnen, müssen wir die Datenbankabfrage in eine wiederverwendbare Funktion kapseln. Diese Funktion kann Abfrageparameter akzeptieren und ein Promise zurückgeben, sodass wir asynchrone Funktionen in React Query verwenden können. Das Folgende ist ein Beispiel für eine Datenbankabfragefunktion:

rrreee

Diese Funktion ist eine asynchrone Funktion, die die API fetch verwendet, um eine POST-Anfrage an die Schnittstelle /api/query des Backends zu initiieren und Senden Sie die Abfrageparameter als Anforderungstext. Anschließend analysiert es die abgerufenen Antwortdaten in JSON und gibt die Daten bei Erfolg zurück. Andernfalls wird ein Fehler ausgegeben.

4. Datenbankabfrage in React Query verwenden

Da wir nun über eine wiederverwendbare Datenbankabfragefunktion verfügen, können wir React Query in der Komponente verwenden, um Daten abzufragen.

🎜Importieren Sie zunächst die Hook-Funktion useQuery und erstellen Sie damit eine Abfrage. Wir verwenden die Hook-Funktion useQuery zum Datenabruf, übergeben einen Abfrageschlüssel (normalerweise eine Zeichenfolge) und eine Funktion zum Auslösen der Abfrage. 🎜rrreee🎜Im obigen Code verwenden wir einen Abfrageschlüssel namens fetchData und übergeben die Funktion fetchDataFromDatabase als Abfragefunktion an useQuery . Die Hook-Funktion useQuery gibt ein Objekt zurück, das Eigenschaften wie data, isLoading und error enthält Eigenschaften, um verschiedene Zustände zu behandeln. 🎜🎜Mit dem obigen Code können wir eine Ladeaufforderungsmeldung entsprechend dem Status isLoading, eine Fehlermeldung über den Status error und eine Fehlermeldung über den Status anzeigen data-Status zum Rendern der aus der Datenbank erhaltenen Daten. 🎜🎜5. In React Query gerenderte Daten🎜Für aus der Datenbank erhaltene Daten können wir den <code>data-Status in der Komponente zum Rendern verwenden. Im obigen Beispiel rendern wir jedes aus der Datenbank abgerufene Datenelement als div-Element, das id und name enthält. 🎜🎜Dies ist nur ein einfaches Beispiel. Sie können je nach Ihren Anwendungsanforderungen ein komplexeres Datenrendering durchführen. 🎜🎜6. Zusammenfassung🎜Durch die Verwendung von React Query können wir problemlos Datenbankabfragen in React-Anwendungen verwenden. In diesem Artikel haben wir zunächst einen React Query-Client erstellt, dann eine wiederverwendbare Datenbankabfragefunktion definiert und diese in der React Query-Komponente verwendet. Schließlich haben wir gelernt, wie man Lade- und Fehlermeldungen basierend auf unterschiedlichen Abfragestatus verarbeitet und aus der Datenbank abgerufene Daten rendert. 🎜🎜Ich hoffe, dieser Artikel kann Ihnen helfen, die Verwendung von Datenbankabfragen in React Query besser zu verstehen, und einige Ideen und Referenzen für die Entwicklung Ihres Projekts liefern. Viel Spaß beim Entwickeln mit React Query! 🎜

Das obige ist der detaillierte Inhalt vonWie verwende ich Datenbankabfragen mit React Query?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!