Endpoints and RESTful API

Qwik City is able to create a RESTful API for your application using Endpoints. Endpoint routes are created the same as how you would create a "page", except the filename should end with .ts instead of .tsx. An index.ts in the src/routes directory is only for data, such as a json response, while an index.tsx is for an HTML page. There is no need to put the "endpoint" routes into a specific api directory within src/routes.

Both "page" and "endpoints" are the same except for one difference: a page exports a default component$() to render HTML, whereas an endpoint exports only HTTP request and response handlers. To learn about defining a page component, you can read more here. An endpoint route however, is used only for the purpose of responding with data.

To consume the data fetched on an endpoint you can use the provided useResource$() hook or the <Resource /> component as described here.

Example API endpoint route

// File: src/routes/product/[skuId]/index.ts
import type { RequestHandler } from '@builder.io/qwik-city';

interface ProductData {
  skuId: string;
  price: number;
  description: string;
}

export const onGet: RequestHandler<ProductData> = async ({ params }) => {
  // put your DB access here, we are hard coding a response for simplicity.
  return {
    skuId: params.skuId,
    price: 123.45,
    description: `Description for ${params.skuId}`,
  };
};

export const onPost: RequestHandler<ProductData> = async ({ params }) => { ... }
export const onPut: RequestHandler<ProductData> = async ({ params }) => { ... }
export const onPatch: RequestHandler<ProductData> = async ({ params }) => { ... }
export const onDelete: RequestHandler<ProductData> = async ({ params }) => { ... }