Data Fetching (Frontend)

Your own backend is called through the typed client from app/api (generated from the handler files); useRequest, useRoutes and the auth-token helpers come from app/hooks.

useApiClient()

Returns the typed client. Every function returns exactly what the handler returned — no .data unwrapping.

import { useApiClient } from "app/api";
 
function CreateOrderButton() {
  const api = useApiClient();
  const handleCreate = async () => {
    await api.orders.create({ customerName: "Alice", productId: 1, quantity: 2 });
  };
  return <button onClick={handleCreate}>Create</button>;
}

Names: get.ts → list, post.ts → create, [id]/get.ts → detail(id), [id]/patch.ts / put.ts → update(id, body), [id]/delete.ts → remove(id); put / patch / delete without an id keep the verb (app/settings/put.ts → api.settings.put(body)); sub-paths use their last segment (app/auth/login/post.ts → api.auth.login(body), app/orders/[id]/status/post.ts → api.orders.status(id, body)). Full table: framework spec → Frontend hooks.

Errors (thrown HTTPException on the server) reject the promise with body { error, message, code } — show e.response?.data?.message.

useApi()

Raw axios instance — third-party APIs only (absolute URLs). Calling your own backend with it (api.get("/orders")) is rejected by check (code.no-raw-useapi-on-own-backend).

useRequest()

Data fetching with loading and error states. Returns { data, loading, error, run, refresh, mutate }. Options: manual, defaultData, refreshDeps, onSuccess, onError.

import { useRequest } from "app/hooks";
import { useApiClient } from "app/api";
 
function OrderCount() {
  const api = useApiClient();
  const { data, loading } = useRequest(() => api.orders.list({ page: 1, pageSize: 1 }));
 
  if (loading) return <span>Loading…</span>;
  return <span>{data?.total} orders</span>;
}

useRoutes()

Returns the list of registered frontend routes — useful for building dynamic menus.

import { useRoutes } from "app/hooks";
 
function Menu() {
  const routes = useRoutes();
  return (
    <ul>
      {routes.map((r) => (
        <li key={r.path}>{r.path}</li>
      ))}
    </ul>
  );
}