KosmoJS automatically generates a fully-typed fetch client for every API route, creating a seamless bridge between your backend API definitions and frontend consumption.
This generated client delivers end-to-end type safety from frontend code to backend handlers, complete with runtime validation that catches errors before requests reach the server.
🤖 Understanding the Generated Client
When you define API routes with typed parameters, payloads, and responses, KosmoJS generates corresponding fetch clients that mirror this structure exactly.
The generator runs alongside other generators like the validation generator, placing its output in the lib directory alongside other generated artifacts.
Each route's client module exports:
🔹 HTTP method functions corresponding to your route's handlers
🔹 Utility functions for URL construction
🔹 Validation schemas for client-side validation
🔹 Full TypeScript types derived from your API route definitions
The client understands your complete API structure - parameters, payload requirements, response shapes - and provides this intelligence through both TypeScript's type system and runtime validation checks, ensuring your frontend and backend remain perfectly synchronized.
This eliminates the traditional friction between API definition and consumption, letting you work with your API as if it were local functions while maintaining all the safety guarantees of runtime validation.
🏗️ The Complete Generated Client Structure
While you typically interact with the fetch client through its exported methods, understanding its complete structure helps you make the most of its capabilities.
Each generated fetch client exports:
HTTP method functions corresponding to the methods your API route handles (GET, POST, PUT, DELETE, etc.). (Details)
Each function accepts parameters and payload according to your type definitions and returns a typed promise for the response.
The path utility function for constructing relative URLs with proper parameter handling and optional query string support. (Details)
The href utility function for constructing absolute URLs with host, parameters, and query strings. (Details)
The validationSchemas object containing validation schemas for parameters, payloads and responses, organized by HTTP method.
Each schema provides check, errors, errorMessage, errorSummary, and validate methods. (Details)
A default export that bundles all of these together, making it convenient to destructure what you need or pass the entire client around as a single object.
This structure gives you flexibility in how you use the client. Import the specific method you need, use the default export to access everything, or destructure multiple capabilities at once:
import useFetch, { path, validationSchemas } from "@front/{api}/users/[id]/fetch";
// Use the fetch method
const user = await useFetch.GET([123]);
// Build a URL
const url = path([123]);
// Validate form data
const isValid = validationSchemas.payload.POST.check(formData);