Paging, Sorting and Filtering ​

The RESTful API created by Remult supports server-side paging, sorting, and filtering. Let's use that to limit, sort and filter the list of tasks.

Limit Number of Fetched Tasks ​

Since our database may eventually contain a lot of tasks, it make sense to use a paging strategy to limit the number of tasks retrieved in a single fetch from the back-end database.

Let's limit the number of fetched tasks to 20.

In the useEffect hook defined in the Home component, pass an options argument to the find method call and set its limit property to 20.

// src/pages/index.tsx

//...

export default function Home() {
  //...

  useEffect(() => {
    taskRepo
      .find({
        limit: 20
      })
      .then(setTasks)
  }, [])

  //...
}

There aren't enough tasks in the database for this change to have an immediate effect, but it will have one later on when we'll add more tasks.

Show Active Tasks on Top ​

Uncompleted tasks are important and should appear above completed tasks in the todo app.

In the useEffect hook, set the orderBy property of the find method call's option argument to an object that contains the fields you want to sort by. Use "asc" and "desc" to determine the sort order.

// src/pages/index.tsx

useEffect(() => {
  taskRepo
    .find({
      limit: 20,
      orderBy: { completed: "asc" }
    })
    .then(setTasks)
}, [])

Server Side Filtering ​

Remult supports sending filter rules to the server to query only the tasks that we need.

Adjust the useEffect hook to fetch only completed tasks.

// src/pages/index.tsx

useEffect(() => {
  taskRepo
    .find({
      limit: 20,
      orderBy: { completed: "asc" },
      where: { completed: true }
    })
    .then(setTasks)
}, [])

Play with different filtering values, and eventually comment it out, since we do need all the tasks

useEffect(() => {
    taskRepo
      .find({
        limit: 20,
        orderBy: { completed: "asc" },
        //where: { completed: true },
      })
      .then(setTasks);
  }, []);