Creating Users with POST

Creating Users with POST in a Remix API Route

Welcome! In this lesson, we’re going to add the “create” part of a simple Users API. You already have a Remix route serving data—now you’ll learn how that same route can accept data from the client and add a new user to the in-memory store. You’ll work in app/routes/api.users.tsx to handle POST /api/users, validate the incoming JSON payload, generate a new user ID, and return the newly-created user with the right HTTP status code. Then you’ll see how the UI in app/routes/_index.tsx triggers that POST request so you can test everything right in the app. Previously\dots In the previous lesson, you served a list of users from an API route and learned how query parameters can shape a response. That’s the “read” side of an API. Now we’ll build the “create” side—accepting JSON input from the frontend and pushing a new record into the same in-memory users collection.

Where POST logic lives in Remix

In Remix API routes, loader() is for read-only requests (typically GET), and action() is for requests that change data (like POST, PUT, PATCH, and DELETE). In this project, both live in the same file: app/routes/api.users.tsx . That means /api/users supports: GET via loader() (returning the users array) POST via action() (creating and returning a new user) Method URL Route file Handler Purpose GET /api/users api.users.tsx loader List users POST /api/users api.users.tsx action Create a user GET /api/users/:id api.users.$id.tsx loader Fetch one user PUT/PATCH/DELETE /api/users/:id api.users.$id.tsx action Replace, partially update, or delete one user

Method	URL	Route file	Handler	Purpose
GET	`/api/users`	`api.users.tsx`	`loader`	List users
POST	`/api/users`	`api.users.tsx`	`action`	Create a user
GET	`/api/users/:id`	`api.users.$id.tsx`	`loader`	Fetch one user
PUT/PATCH/DELETE	`/api/users/:id`	`api.users.$id.tsx`	`action`	Replace, partially update, or delete one user

Returning all users with the loader

This first block is the GET handler in app/routes/api.users.tsx . It returns the current in-memory users array as JSON. TSX // app/routes/api.users.tsx import { json, type LoaderFunctionArgs, type ActionFunctionArgs } from '@remix-run/node'; import { users, type User } from '~/lib/data'; /** * Handles GET requests to /api/users. * Retrieves and returns a list of all users. */ export async function loader() {console.log('GET request to /api/users'); return json(users);} // app/routes/api.users.tsx import { json, type LoaderFunctionArgs, type ActionFunctionArgs } from '@remix-run/node'; import { users, type User } from '~/lib/data'; /** * Handles GET requests to /api/users. * Retrieves and returns a list of all users. */ export async function loader() {console.log('GET request to /api/users'); return json(users);} The loader() here returns json(users), which means the response body is the raw array (not wrapped in { users: ... }). That’s important because the UI expects the endpoint to behave like a straightforward JSON API. Even though Remix can pass { request } into a loader, this implementation doesn’t need the request object, because it always returns the full array exactly as it exists in memory. The console.log(...) is a lightweight way to make requests visible while you’re developing and testing. When you click buttons in the UI, you can confirm which endpoint/method was hit.

Join the 1M+ learners on CodeSignal

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

TSX

// app/routes/api.users.tsx
import { json, type LoaderFunctionArgs, type ActionFunctionArgs } from '@remix-run/node';
import { users, type User } from '~/lib/data';

/**
 * Handles GET requests to /api/users.
 * Retrieves and returns a list of all users.
 */
export async function loader() {
  console.log('GET request to /api/users');
  return json(users);
}

TSX

// app/routes/api.users.tsx
/**
 * Handles POST requests to /api/users.
 * Creates a new user and adds it to the data store.
 */
export async function action({ request }: ActionFunctionArgs) {
  if (request.method !== 'POST') {
    return json(
      { error: 'Method not allowed' },
      { status: 405, headers: { Allow: 'GET, POST' } }
    );
  }

  try {
    const newUser: Omit<User, 'id'> = await request.json();

TSX

// app/routes/api.users.tsx
    // Basic validation
    if (!newUser.name || !newUser.email) {
      return json({ error: 'Name and email are required' }, { status: 400 });
    }

    // Email validation (basic regex)
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(newUser.email)) {
      return json({ error: 'Invalid email format' }, { status: 400 });
    }

TSX

// app/routes/api.users.tsx
    // Generate a new ID
    const newId = Math.max(...users.map(u => u.id), 0) + 1;
    const userWithId: User = {
      id: newId,
      name: newUser.name,
      email: newUser.email,
      role: newUser.role ?? 'user',
      isActive: newUser.isActive ?? true,
      createdAt: new Date().toISOString()
    };

    users.push(userWithId);
    console.log(`POST request to /api/users - created user id=${newId}`);
    return json(userWithId, { status: 201 });
  } catch (error) {
    return json({ error: 'Invalid request body' }, { status: 400 });
  }
}

TSX

// app/routes/_index.tsx (excerpt)
const handleRequest = async (
  method: HttpMethod,
  path: string,
  body?: RequestPayload
) => {
  if (isBusy) return;

  setPendingAction(method);
  setError(null);
  setResult("Sending request...");

  try {
    const headers = new Headers({
      Accept: "application/json",
      "X-Requested-With": "XMLHttpRequest",
      "X-Remix-Data": "true"
    });

    let requestBody: string | undefined;
    if (body && Object.keys(body).length > 0) {
      headers.set("Content-Type", "application/json");
      requestBody = JSON.stringify(body);
    }

    const requestInit: RequestInit = {
      method,
      headers,
      credentials: "same-origin",
      body: requestBody
    };

    if (method === "GET") {
      delete requestInit.body;
    }

    const response = await fetch(path, requestInit);
    // ...parsing & UI rendering below...
  } finally {
    setPendingAction(null);
  }
};

TSX

// app/routes/_index.tsx (excerpt)
const handleGetAll = () => {
  setError(null);

  const params = new URLSearchParams();
  if (filterRole.trim()) {
    params.set("role", filterRole.trim());
  }
  if (filterActive !== "any") {
    params.set("active", filterActive);
  }

  const queryString = params.toString();
  const path = queryString ? `${USERS_ENDPOINT}?${queryString}` : USERS_ENDPOINT;
  void handleRequest("GET", path);
};

TSX

// app/routes/_index.tsx (excerpt)
const handleCreate = () => {
  setError(null);
  const trimmedName = name.trim();
  const trimmedEmail = email.trim();

  if (!trimmedName || !trimmedEmail) {
    showValidationError("Name and email are required to create a user.");
    return;
  }

  const payload: RequestPayload = {
    name: trimmedName,
    email: trimmedEmail,
    isActive: isActiveInput === "true"
  };

  if (roleInput.trim()) {
    payload.role = roleInput.trim();
  }

  void handleRequest("POST", USERS_ENDPOINT, payload);
};

TSX

// app/routes/_index.tsx (excerpt)
const handleGetAll = () => {
  setError(null);

  const params = new URLSearchParams();
  if (filterRole.trim()) {
    params.set("role", filterRole.trim());
  }
  if (filterActive !== "any") {
    params.set("active", filterActive);
  }

  const queryString = params.toString();
  const path = queryString ? `${USERS_ENDPOINT}?${queryString}` : USERS_ENDPOINT;
  void handleRequest("GET", path);
};

Creating Users with POST in a Remix API Route

Where POST logic lives in Remix

Returning all users with the loader

Join the 1M+ learners on CodeSignal

Handling POST in the action: method guard + parsing

Validating required fields and email format

Creating the user: generating an ID, storing it, returning 201

How the UI sends POST requests

The shared request helper: `handleRequest`

GET all users: building query params and calling the endpoint

POST create user: validating inputs and sending JSON

Recap