Resource routes for APIs in Remix

Introduction

Resource routes help organize API endpoints by grouping related actions for data in one place. This makes your API easier to understand and maintain.

When building an API that manages data like users, posts, or products.

When you want to follow a clear pattern for creating, reading, updating, and deleting data.

When you want to keep your API routes clean and consistent.

When you want to quickly add standard API actions without writing separate routes for each.

When you want to use Remix's built-in conventions to handle API requests efficiently.

Syntax

Remix

export const loader = async ({ params }) => { /* handle GET request */ };
export const action = async ({ request, params }) => { /* handle POST, PUT, DELETE */ };

// File path example: app/routes/api/posts.ts

Resource routes in Remix use loader for GET requests and action for other HTTP methods.

File names and folder structure define the API route paths automatically.

Examples

This loader handles GET requests to list all items in a resource.

Remix

export const loader = async () => {
  return new Response(JSON.stringify({ message: 'List all items' }), { status: 200 });
};

This action handles POST and DELETE requests for creating and deleting items.

Remix

export const action = async ({ request }) => {
  if (request.method === 'POST') {
    // create new item
    return new Response('Created', { status: 201 });
  }
  if (request.method === 'DELETE') {
    // delete item
    return new Response('Deleted', { status: 200 });
  }
};

Remix uses file and folder names to map resource routes automatically.

Remix

// File structure example:
// app/routes/api/posts.ts
// handles /api/posts route with GET and POST

// app/routes/api/posts/$postId.ts
// handles /api/posts/:postId route with GET, PUT, DELETE

Sample Program

This example shows a simple resource route for posts. The loader returns all posts on GET requests. The action handles POST requests to add a new post.

Remix

import { json } from '@remix-run/node';

// app/routes/api/posts.ts

let posts = [
  { id: '1', title: 'First Post' },
  { id: '2', title: 'Second Post' }
];

export const loader = async () => {
  return json(posts);
};

export const action = async ({ request }) => {
  if (request.method === 'POST') {
    const formData = await request.formData();
    const title = formData.get('title');
    if (typeof title !== 'string' || !title) {
      return json({ error: 'Title is required' }, { status: 400 });
    }
    const newPost = { id: String(posts.length + 1), title };
    posts.push(newPost);
    return json(newPost, { status: 201 });
  }
  return json({ error: 'Method not allowed' }, { status: 405 });
};

Important Notes

Remember to handle different HTTP methods inside the action function.

Use Remix's json helper to return JSON responses easily.

File and folder names define your API paths, so organize them clearly.

Summary

Resource routes group related API actions in one file using loader and action.

Remix uses file structure to map URLs to resource routes automatically.

This pattern keeps your API clean, consistent, and easy to maintain.