Welcome back! In the previous lesson, you learned how to fetch and display catalog data in your React app using TanStack Query. Now, let’s take your catalog to the next level by adding server-side sorting.

Server-side sorting means that when a user wants to see the books sorted by title or author, your app will ask the server to send the data in the correct order. This is especially important when you have a lot of data because sorting on the server is faster and uses less memory on the user’s device. It also ensures that users always see the most up-to-date and accurate results.

By the end of this lesson, you will know how to let users sort the catalog by different fields and how to make your app request sorted data from the server.

When you want to sort data, you have two main options:

• Client-side sorting: Fetch all the data, then sort it in the browser.
• Server-side sorting: Ask the server to sort the data before sending it.

For small datasets, client-side sorting is fine. But for larger catalogs, server-side sorting is better because:

• It reduces the amount of data sent to the client.
• It uses the server’s resources, which are usually more powerful.
• It ensures the user always sees the latest, most accurate data.

Regarding the amount of data being reduced — at first glance, sorting might seem like it only changes the order of items, so it’s not obvious why it would affect how much data is sent.

Consider a catalog with 10,000 books. If you perform client-side sorting, the server sends all 10,000 items to the browser, even if the user only needs to see the first 20.

With server-side sorting (usually combined with pagination), you can tell the server:

“Give me the first 20 books, sorted by title.”

The server sorts the entire dataset, then returns only those 20 items. This way, much less data travels over the network, making the app faster and more efficient.

To do server-side sorting, your app needs to send sorting instructions to the server. This is usually done by adding query parameters to the API request, such as sortBy=title and order=asc.

For example, a request might look like this:

This tells the server to return the books sorted by title in ascending order.

Let’s update the API call so it can send sorting instructions to the server. We’ll add two parameters: sortBy (the field to sort by) and order (ascending or descending).

Here’s how you can do it:

Explanation:

• We define a GetBooksParams interface to describe the sorting options.
• The getBooks function now accepts an object with sortBy and order.
• Inside the function, we use URLSearchParams to correctly construct the query string from the provided parameters (/books?sortBy=...&order=...).
• When apiClient.get(url) is called, the request includes these query parameters, signaling the server to return sorted data.

Example Output:

If you call getBooks({ sortBy: "title", order: "asc" }), the server will return the list of books sorted by title from A to Z.

Now, let’s connect the sorting options to the user interface. We want users to be able to click a button to sort by title or author, and for the app to update the results accordingly.

Here’s how you can do it:

What CatalogPage Does

• URL-backed sort state

  • useSearchParams() reads and writes the query string.
  • sortBy defaults to "title"; order defaults to "asc" if not present in the URL.

1. User clicks Sort by Title → URL becomes ?sortBy=title&order=asc (or desc when toggled).
2. useQuery detects the new queryKey and calls getBooks({ sortBy, order }).
3. getBooks requests /books?sortBy=title&order=asc and returns the server’s data.
4. The catalog re-renders with the server-sorted results.

Why this design scales

• Server handles heavy lifting (correctness + performance).
• URL represents state, improving UX and shareability.
• React Query caches per sort variant, reducing redundant requests and keeping the UI responsive.

In this lesson, you learned how to implement server-side sorting in your catalog app. You saw how to:

• Update the API call to accept sorting parameters.
• Connect sorting options to the user interface.
• Fetch and display sorted data based on user actions.

This makes your catalog more dynamic and user-friendly, especially as your data grows. Up next, you’ll get to practice these skills with hands-on exercises. Try out different sorting options and see how the catalog responds. Great work — let’s keep building!