Fetching a Single User

Welcome back! In the previous lesson, you learned how to create new users using the POST method in a Remix route. Now, let’s look at another common task: fetching a single item, such as a user, by its unique identifier.

In real-world applications, you often need to display details for a specific item. For example, when you click on a user’s name in a list, you expect to see their profile page. To make this work, your backend needs to handle requests for a specific user and return only that user’s data.

In this lesson, you will learn how to set up a dynamic route in Remix to fetch a single user by their ID. This is a key skill for building APIs that support user profiles, product pages, and more.

Before we dive in, let’s quickly remind ourselves of the setup you already have. You have a Remix project with a route for users and a mock array of user data. Here’s a summary of the relevant parts:

// app/lib/data.ts
export const users = [
  { id: 1, name: "Alice", email: "alice@example.com" },
  { id: 2, name: "Bob", email: "bob@example.com" },
  // ...more users
];

// app/routes/api.users.tsx (for POST requests)
import { users } from "~/lib/data";
// ...POST handler code

You do not need to set this up again, but keep in mind that the users array is our mock database for this lesson.

To fetch a single user, we need a way to handle requests like /api/users/2, where 2 is the user’s ID. Remix makes this easy with dynamic route segments.

A dynamic route in Remix uses a dollar sign in the file name to capture part of the URL as a parameter. For example:

app/routes/api.users.$id.tsx

In this case, $id means any request to /api/users/<some-id> will be handled by this file, and the <some-id> part (like 2, 17, or 99) will be available as a parameter named id.

This allows us to write code that responds to requests for any user, not just a specific one.

Let’s look at the code for handling a GET request to fetch a single user by ID. Here is the complete handler:

import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { users } from "~/lib/data";

/** GET /api/users/:id — return a single user by ID */
export async function loader({ params }: LoaderFunctionArgs) {
  const id = Number(params.id);
  const user = users.find(u => u.id === id);

  if (!user) {
    return json({ error: "User not found" }, { status: 404 });
  }

  return json(user);
}

Let’s break down what’s happening here:

• We import the users array and the necessary Remix helpers.
• The loader function is called when a GET request is made to /api/users/:id.
• We extract the id from the URL using params.id and convert it to a number with Number.
• We search the users array for a user with a matching id.
• If the user is found, we return their data as JSON.
• If the user is not found, we return a JSON error message with a 404 status.