Skip to content

The fetch index exports a map of route paths to their generated clients:

pages/example/index.tsx
ts
import fetchClients from "_/fetch";

const response = await fetchClients["users/[id]"].GET([123]);

πŸš€ Method Signatures ​

Each client exposes methods for the HTTP verbs your route handles. The signature reflects your route definition directly:

  • First argument is a parameter array, in path order
  • Second argument is the payload, if your handler defines one

Given this route:

api/users/[id]/index.ts
ts
export default defineRoute<"users/[id]", [number]>(({ GET }) => [
  GET<{
    query: { name?: string },
    response: [200, "json", { id: number; name: string; email: string }],
  }>(async (ctx) => { /* ... */ }),
]);

The generated client expects a number parameter and an optional payload:

pages/example/index.tsx
ts
const useFetch = fetchClients["users/[id]"];

const response = await useFetch.GET([123]);
const response = await useFetch.GET([123], { query: { name: "John" } });
// response is typed as { id: number; name: string; email: string }

πŸ“­ Routes Without Parameters or Payloads ​

No parameters, no array:

ts
const response = await fetchClients["users"].GET();

If there is a payload to send without params, just use an empty array for params:

ts
const response = await fetchClients["users"].GET([], {
  query: { filter: "active", page: 1 }
});

If the route defines no payload type (or never), the second argument is not required. The client adapts to exactly what your API expects - passing the wrong shape is a type error.

Released under the MIT License.