Modify Data

Endpoints can define a way to fetch data and they can also define HTTP verbs to modify data. These are GET, POST, PUT, PATCH, DELETE. We have already discussed the GET verb in the previous section. Each of these verbs has a corresponding on___ method such as onGet, onPost, onPut, onPatch, and onDelete.

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

type EndpointData = ProductData | null;

interface ProductData {
  skuId: string;
  price: number;
  description: string;
}
export const onPut: RequestHandler<EndpointData> = async ({ url, params, request, response }) => {
  // put your DB access here (hard coding a response for the simplicity)

  // read data from request and perform DB update.
  // console.log(params.skuId);
  // console.log(request.method);
  // console.log(url.pathname);

  // set response headers
  response.headers.append('Cache-Control', ' public, max-age=86400');

  // return data to be access from `useEndpoint()`
  return {
    skuId: params.skuId,
    price: 123.45,
    description: `Description for ${params.skuId}`,
  };
};