データベースを使用して React Query でデータをフィルタリングおよび並べ替える

React Query でデータのフィルタリングと並べ替えにデータベースを使用する

React Query はデータを管理するためのライブラリであり、その威力はデータベースと対話する機能にあります。データのフィルタリングおよび並べ替え機能を実装するための対話。この記事では、React Query でデータベースを使用してデータをフィルターおよび並べ替える方法の具体的な例を示します。

まず、デモンストレーションの便宜上、id、title、description、status、created_at のフィールドが含まれる「todos」という名前のデータベース テーブルを使用していると仮定します。

次に、React Query をインストールして構成し、データベースへの接続をセットアップする必要があります。具体的なインストールと設定の手順については、React Query の公式ドキュメントを参照してください。

React Query のインストールと構成が完了し、ToDo リストを表示する「TodoList」という名前のコンポーネントを作成したと仮定します。次に、React Query を使用してデータをフィルターおよび並べ替える方法を示します。

まず、データベース内のすべての ToDo データを取得する必要があります。 「TodoList」コンポーネントでは、次のコードを使用してデータベースにクエリを実行し、ToDo データを取得できます。

import { useQuery } from 'react-query';

const TodoList = () => {
  const { data, isLoading, error } = useQuery('todos', async () => {
    const response = await fetch('/api/todos');
    const data = await response.json();
    return data;
  });

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

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

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

ToDo データの取得に成功したので、フィルタリング関数と並べ替え関数を追加します。

ステータスに応じて To Do データをフィルタリングしたいとします。データベースにクエリを実行するときにステータス パラメータを追加し、このパラメータを通じてデータベースから対応するデータを取得できます。サンプル コードは次のとおりです。

import { useQuery } from 'react-query';

const TodoList = () => {
  const { data, isLoading, error } = useQuery(['todos', { status: 'completed' }], async (_, { status }) => {
    const response = await fetch(`/api/todos?status=${status}`);
    const data = await response.json();
    return data;
  });

  // 省略其他代码
};

上記のコードでは、useQuery の最初のパラメーターとして配列を渡すことによって、クエリのキーを指定します。配列の最初の要素は文字列「todos」で、クエリの一意の識別子として使用できます。配列の 2 番目の要素は、フィルタリングの基準を含むオブジェクトです。この例では、 { status: 'completed' } を追加することで、完了した To-Do データのみを取得することを指定します。

次にソート機能を追加します。 To Do 項目を作成時間の降順に並べ替えたいとします。データベースにクエリを実行するときに並べ替えパラメーターを追加し、このパラメーターによってデータを並べ替えることができます。サンプル コードは次のとおりです。

import { useQuery } from 'react-query';

const TodoList = () => {
  const { data, isLoading, error } = useQuery(['todos', { orderBy: 'created_at', order: 'desc' }], async (_, { orderBy, order }) => {
    const response = await fetch(`/api/todos?orderBy=${orderBy}&order=${order}`);
    const data = await response.json();
    return data;
  });

  // 省略其他代码
};

上記のコードでは、useQuery の最初のパラメーターとして配列を渡すことによって、クエリのキーを指定します。配列の最初の要素は文字列「todos」で、クエリの一意の識別子として使用できます。配列の 2 番目の要素は、並べ替えに使用されるパラメーターを含むオブジェクトです。この例では、{ orderBy: 'created_at', order: 'desc' } を追加することで、作成時間 (created_at) による降順を指定します。

上記のコード例を通じて、データベースを使用して React Query でデータをフィルタリングおよび並べ替える方法の具体的な実装を示します。もちろん、実際のプロジェクトでは具体的な実装が異なる場合があるため、独自のニーズに応じて対応する調整を行う必要があります。同時に、使用するデータベースとバックエンド フレームワークに応じて、対応するクエリ操作と並べ替え操作を実行する必要もあります。ただし、一般に、React Query はデータベースと対話するための非常に便利なインターフェイスを提供し、データのフィルタリングと並べ替えをより簡単かつ効率的にします。

以上がデータベースを使用して React Query でデータをフィルタリングおよび並べ替えるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。