Data Overview
Each route has the ability to add HTTP request and response handlers, allowing for developers to retrieve and modify data. The handlers can also be used by endpoints, which only respond with data rather than a page's HTML.
This feature enables you to handle any request event, have side effects on the request pipeline, just before you render the component and respond with custom content. It is available to pages, layouts and endpoint routes, but not on regular components.
Request and Response Handlers
On pages, layouts, and endpoints, we can access request data by implementing request handler functions such as onGet
, onPost
, onPut
, etc. These functions are executed according to the HTTP method used for this route.
Additonally, an onRequest
function can be used to handle any request method, rather than a specific one. For example, if both onGet
and onRequest
is provided, for a GET
request, the onGet
will be called. However, in this scenario, if a POST
request method came in, then the onRequest
handler would be called since an onPost
was not provided.
The onRequest
is available as a catch-all to any request methods that do not have a specific method.
import type { RequestHandler } from '@builder.io/qwik-city';
export const onGet: RequestHandler<ProductData> = async ({ params }) => {
// put your DB access here (hard coding data for simplicity)
return {
skuId: params.skuId,
price: 123.45,
description: `Description for ${params.skuId}`,
};
};
Request Event
The request handler functions receive a RequestEvent
argument which has the following properties:
Field | Description |
---|---|
request | The request object |
response | The response object, which can be used to set response headers and status |
url | URL which includes pathname , hostname , etc. |
next | Next middleware function |
abort | Request abort function |
params | Custom user params found within the URL |
platform | Platform data object (useful for Cloudflare, Netlify, etc) |