在 React Query 中使用資料庫進行資料篩選和排序

在React Query 中使用資料庫進行資料篩選與排序

React Query 是一個用於管理資料的函式庫，它的強大之處在於可以與資料庫進行交互，實現資料篩選和排序的功能。在本文中，我們將示範如何在 React Query 中使用資料庫進行資料篩選和排序的具體範例。

首先，為了示範方便，我們假設使用的是一個名為 "todos" 的資料庫表，該表包含以下欄位：id, title, description, status, created_at。

接下來，我們需要安裝和設定 React Query，並設定與資料庫的連線。具體的安裝和設定步驟可以參考 React Query 的官方文件。

我們假設已經完成了 React Query 的安裝和配置，並建立了一個名為 "TodoList" 的元件來展示待辦事項清單。接下來，我們將展示如何使用 React Query 進行資料篩選和排序。

首先，我們需要取得資料庫中的所有待辦事項資料。在"TodoList" 元件中，我們可以使用以下程式碼來查詢資料庫並取得待辦事項資料：

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>
  );
};

現在我們已經成功取得了待辦事項數據，接下來我們將新增篩選和排序的功能。

假設我們想按照狀態來篩選待辦事項數據，我們可以在查詢資料庫時新增一個狀態參數，並透過該參數從資料庫中取得相應的資料。以下是一個範例程式碼：

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'，可以作為查詢的唯一識別碼。數組的第二個元素是一個對象，包含了用於篩選的條件。在這個範例中，我們透過新增 { status: 'completed' } 來指定只取得已完成的待辦事項資料。

接下來，我們將加入排序的功能。假設我們希望按照待辦事項的建立時間進行降序排序。我們可以在查詢資料庫時新增一個排序參數，並透過該參數對資料進行排序。以下是一個範例程式碼：

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'，可以作為查詢的唯一識別碼。數組的第二個元素是一個對象，包含了用於排序的參數。在這個範例中，我們透過新增 { orderBy: 'created_at', order: 'desc' } 來指定依照建立時間（created_at）進行降序排序。

透過上述程式碼範例，我們示範如何在 React Query 中使用資料庫進行資料篩選和排序的具體實作。當然，在實際的專案中，具體的實作可能會有所差異，需要根據自己的需求進行相應調整。同時也需要根據自己使用的資料庫和後端框架來進行對應的查詢和排序作業。但總的來說，React Query 提供了非常便捷的介面來與資料庫交互，使得資料的篩選和排序變得更加簡單和有效率。

以上是在 React Query 中使用資料庫進行資料篩選和排序的詳細內容。更多資訊請關注PHP中文網其他相關文章！