Pembahasan

Resource Routes

Resource routes ini simpelnya adalah route yang nggak punya UI, jadi lo cuman export fungsi loader atau action aja. Persis, fungsinya kayak API Routes di Next.js. Maka dari itu, kita coba bikin "API Routes" di React Router pake resource routes.

Pertama, lo bikin route-nya dulu di app/routes.ts:

app/routes.ts

import { type RouteConfig, route, prefix } from '@react-router/dev/routes';

export default [
  // route yang lain...

  // resource routes
  prefix('api', [
    route('products', 'routes/api/products.ts'),
  ]),
] satisfies RouteConfig;

Kemudian lo bikin file app/routes/api/products.ts:

app/routes/api/products.ts

import type { Route } from './+types/products';
import { db } from '~/libs/db';

export async function loader({ request }: Route.LoaderArgs) {
  const products = await db.getProducts();

  return Response.json(products);
}

Selesai! Sekarang lo punya resource route yang bisa diakses di /api/products.

Fungsi loader bisa lo pake buat nge-handle request GET ke /api/products. Sementara buat request POST, PUT, DELETE, atau PATCH, bakal di-handle sama fungsi action:

app/routes/api/products.ts

import type { Route } from './+types/products';
import { db } from '~/libs/db';

// loader yang sebelumnya

export async function action({ request }: Route.ActionArgs) {
  const formData = await request.formData();
  const name = formData.get('name') as string;
  
  // Simulasi simpan produk
  const product = await db.createProduct({ name });
  
  return Response.json(product, {
    status: 201,
  });
}

Kalo dalam suatu kasus lo pake fetch dan ngirim payload JSON, lo bisa pake request.json():

app/routes/api/products.ts

import type { Route } from './+types/products';
import { db } from '~/libs/db';

export async function action({ request }: Route.ActionArgs) {
  const data = await request.json();
  
  // Simulasi simpan produk
  const product = await db.createProduct({ name });
  
  return Response.json(product, {
    status: 201,
  });
}

Sesuai sama namanya, resource routes ini nggak khusus buat API aja. Lo bisa ngelakuin sesuatu yang lain juga, misalnya nge-handle webhook, render PDF, atau nge-stream response dari LLM.

Resource Routes

Sudah paham pelajaran ini?

Diskusi