Implementing Server Sorting

Introduction: The Need for Server-Side Sorting

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.

How Server-Side Sorting Works

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: GET /books?sortBy=title&order=asc This tells the server to return the books sorted by title in ascending order.

Adding Sorting Parameters to the API Call

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

// src/api/books.ts import { apiClient } from "./client"; import { Book } from "../lib/types"; export interface PaginatedBooksResponse { items: Book[]; total: number; page: number; pageSize: number; } export interface GetBooksParams { sortBy?: string; order?: "asc" | "desc"; } export const getBooks = async ({ sortBy, order }: GetBooksParams = {}) => { const params: Record<string, string> = {}; if (sortBy) params.sortBy = sortBy; if (order) params.order = order; const queryString = new URLSearchParams(params).toString(); const url = `/books?${queryString}`; console.log("Fetching:", url); const { data } = await apiClient.get(url); return data.data; };

Triggering Sorting from the UI

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:

TypeScript

// src/features/catalog/CatalogPage.tsx
import { useQuery } from "@tanstack/react-query";
import { useSearchParams } from "react-router-dom";
import { getBooks } from "../../api/books";
import BookCard from "./BookCard";
import Spinner from "../../components/Spinner";

export default function CatalogPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const sortBy = searchParams.get("sortBy") || "title";
  const order = (searchParams.get("order") as "asc" | "desc") || "asc";

  const { data, isLoading } = useQuery({
    queryKey: ["books", { sortBy, order }],
    queryFn: () => getBooks({ sortBy, order }),
  });

  const handleSort = (newSortBy: string) => {
    const newOrder = sortBy === newSortBy && order === "asc" ? "desc" : "asc";
    setSearchParams({ sortBy: newSortBy, order: newOrder });
  };

  if (isLoading) return <Spinner />;

  return (
    <div>
      <h1 className="text-3xl font-bold mb-6">Book Catalog</h1>
      <div className="flex gap-2 mb-4">
        <button onClick={() => handleSort('title')} className="bg-slate-700 px-3 py-1 rounded-md">Sort by Title</button>
        <button onClick={() => handleSort('author')} className="bg-slate-700 px-3 py-1 rounded-md">Sort by Author</button>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {data?.items.map((book) => (
          <BookCard key={book.id} id={book.id} title={book.title} author={book.author} />
        ))}
      </div>
    </div>
  );
}

// src/features/catalog/CatalogPage.tsx
import { useQuery } from "@tanstack/react-query";
import { useSearchParams } from "react-router-dom";
import { getBooks } from "../../api/books";
import BookCard from "./BookCard";
import Spinner from "../../components/Spinner";

export default function CatalogPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const sortBy = searchParams.get("sortBy") || "title";
  const order = (searchParams.get("order") as "asc" | "desc") || "asc";

  const { data, isLoading } = useQuery({
    queryKey: ["books", { sortBy, order }],
    queryFn: () => getBooks({ sortBy, order }),
  });

  const handleSort = (newSortBy: string) => {
    const newOrder = sortBy === newSortBy && order === "asc" ? "desc" : "asc";
    setSearchParams({ sortBy: newSortBy, order: newOrder });
  };

  if (isLoading) return <Spinner />;

  return (
    <div>
      <h1 className="text-3xl font-bold mb-6">Book Catalog</h1>
      <div className="flex gap-2 mb-4">
        <button onClick={() => handleSort('title')} className="bg-slate-700 px-3 py-1 rounded-md">Sort by Title</button>
        <button onClick={() => handleSort('author')} className="bg-slate-700 px-3 py-1 rounded-md">Sort by Author</button>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {data?.items.map((book) => (
          <BookCard key={book.id} id={book.id} title={book.title} author={book.author} />
        ))}
      </div>
    </div>
  );
}

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.
- Storing state in the URL makes sorting shareable (copy/paste the link) and refresh-resilient.
Fetching sorted data with useQuery
- queryKey: ["books", { sortBy, order }] partitions the cache by the current sort; different sort pairs get different cache entries for snappy back/forward navigation.
- queryFn: () => getBooks({ sortBy, order }) delegates the request to your API helper, which appends ?sortBy=...&order=... and returns the typed payload.
- While loading, a <Spinner /> is shown; once loaded, data renders.
Sort toggling behavior
- handleSort(newSortBy) flips the order to "desc" if the user clicks the currently active field while it’s "asc"; otherwise it sets "asc" for a new field.
- setSearchParams(...) updates the URL, which in turn updates sortBy/order; React Query sees the key change and refetches with the new parameters.
Rendering
- The grid maps data.items into BookCards. Each card receives the minimal props it needs (id, title, author), keeping rendering components decoupled from the server’s full payload.

Introduction: The Need for Server-Side Sorting

How Server-Side Sorting Works

Adding Sorting Parameters to the API Call

Join the 1M+ learners on CodeSignal

Triggering Sorting from the UI

End-to-End Flow at a Glance

Summary & What’s Next