Using a database to filter and sort data in React Query

Use the database in React Query for data filtering and sorting

React Query is a library for managing data. Its power lies in its ability to interact with the database. Interaction to implement data filtering and sorting functions. In this article, we will demonstrate a concrete example of how to filter and sort data using a database in React Query.

First, for the convenience of demonstration, we assume that we are using a database table named "todos", which contains the following fields: id, title, description, status, created_at.

Next, we need to install and configure React Query and set up a connection to the database. For specific installation and configuration steps, please refer to the official documentation of React Query.

We assume that we have completed the installation and configuration of React Query and created a component named "TodoList" to display the to-do list. Next, we'll show how to filter and sort data using React Query.

First, we need to get all the to-do data in the database. In the "TodoList" component, we can use the following code to query the database and obtain the to-do data:

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

Now that we have successfully obtained the to-do data, we will add filtering and sorting functions .

Suppose we want to filter to-do data according to status, we can add a status parameter when querying the database, and obtain the corresponding data from the database through this parameter. Here is a sample code:

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

  // 省略其他代码
};

In the above code, we specify the keys of the query by passing an array as the first parameter of useQuery. The first element of the array is the string 'todos', which can be used as a unique identifier for the query. The second element of the array is an object containing the criteria for filtering. In this example, we specify that we only get completed to-do data by adding { status: 'completed' }.

Next, we will add the sorting function. Suppose we want to sort the to-do items in descending order by creation time. We can add a sort parameter when querying the database and sort the data by this parameter. Here is a sample code:

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

  // 省略其他代码
};

In the above code, we specify the keys of the query by passing an array as the first parameter of useQuery. The first element of the array is the string 'todos', which can be used as a unique identifier for the query. The second element of the array is an object containing the parameters used for sorting. In this example, we specify descending ordering by creation time (created_at) by adding { orderBy: 'created_at', order: 'desc' }.

Through the above code examples, we demonstrate the specific implementation of how to use the database to filter and sort data in React Query. Of course, in actual projects, the specific implementation may be different, and you need to make corresponding adjustments according to your own needs. At the same time, you also need to perform corresponding query and sorting operations according to the database and back-end framework you use. But in general, React Query provides a very convenient interface to interact with the database, making filtering and sorting of data easier and more efficient.

The above is the detailed content of Using a database to filter and sort data in React Query. For more information, please follow other related articles on the PHP Chinese website!