React Query でデータベース クエリを使用するにはどうすればよいですか?

React Query でデータベース クエリを使用するにはどうすればよいですか?

はじめに: React Query は強力な状態管理ライブラリであり、React アプリケーションでのネットワーク リクエストとデータ キャッシュの管理に最適です。これは、データ クエリを処理するためのシンプルかつ強力な方法を提供し、データベースと簡単に対話できるようにします。この記事では、React Query でデータベース クエリを使用する方法の詳細なコード例を示します。

1. 準備
始める前に、React Query がインストールされていて、使用できるデータベースがあることを確認してください。ここではデータベースが MongoDB であることを前提としていますが、他の種類のデータベースを使用することもできます。

2. React Query クライアントの作成
まず、データ クエリを管理するための React Query クライアントを作成する必要があります。プロジェクトのエントリ ファイル (通常は index.js) で、QueryClient と QueryClientProvider をインポートし、グローバル React Query クライアント オブジェクトを作成して追加します。 to QueryClientProvider:

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

const queryClient = new QueryClient();

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

3. データベース クエリ関数を定義します
データベース クエリの使用を開始する前に、データベース クエリを再利用可能な関数にカプセル化する必要があります。この関数はクエリ パラメーターを受け入れて 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 を使用してバックエンドの /api/query## への POST リクエストを開始する非同期関数です。 # Interface を指定し、クエリ パラメータをリクエスト本文として送信します。次に、取得した応答データを JSON に解析し、成功した場合はデータを返します。そうでない場合はエラーがスローされます。

4. 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 状態を通じて、データベースから取得したデータをレンダリングします。

5. React Query でレンダリングされるデータ

データベースから取得したデータの場合、コンポーネント内の
data 状態を使用してレンダリングできます。上記の例では、データベースから取得した各データ項目を、id と name を含む div 要素としてレンダリングします。

これは単なる単純な例であり、アプリケーションのニーズに応じて、より複雑なデータ レンダリングを実行できます。

6. 概要

React Query を使用すると、React アプリケーションでデータベース クエリを簡単に使用できます。この記事では、最初に React Query クライアントを作成し、次に再利用可能なデータベース クエリ関数を定義して、それを React Query コンポーネントで使用しました。最後に、さまざまなクエリ ステータスに基づいて読み込みメッセージとエラー メッセージを処理し、データベースから取得したデータをレンダリングする方法を学びました。

この記事が、React Query でのデータベース クエリの使用方法をより深く理解し、プロジェクトの開発にいくつかのアイデアや参考情報を提供するのに役立つことを願っています。 React Query を使った開発を楽しんでください。

以上がReact Query でデータベース クエリを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。