React Query でデータベースクエリを使用するにはどうすればよいですか?-jsチュートリアル-php.cn

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

王林

リリース： 2023-09-28 15:40:43

オリジナル

1420 人が閲覧しました

如何在 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 サイトの他の関連記事を参照してください。