Qwik City - Non-200 Response

At times it is necessary to respond with HTTP status codes other than 200. In such cases, data endpoint is the place to determine what status code should be returned.

Assume this file layout.

- src/
  - routes/
    - product/
      - [skuId]/
        - details.js     # https://example.com/product/1234/details

404 - Not Found

Let's say that a user does a request to an invalid skuId such as https://example.com/product/999/details. In this case, we would like to return a 404 HTTP status code and render a 404 page. The place where we determine if the request is valid or not is the data endpoint by looking into the database. Even if the response is non-200, the component still gets a chance to render a page (Except in the redirect case.)

// File: src/routes/product/[skuId]/details.js
import {component$} from '@builder.io/qwik';
import {DocumentHead} from '@builder.io/qwik-city';

type EndpointData = ProductData | null;

interface ProductData {
  skuId: string;
  price: number;
  description: string;
}
export const onGet: EndpointHandler<EndpointData> = async ({ params, response }) => {
  const product = await loadProductFromDatabase(params.skuId);

  if (!product) {
    // Product data not found
    // but the data is still given to the renderer to decide what to do
    response.status = 404
    return null
  } else {
    // ...
  }
};

export default component$(() => {
  const resource = useEndpoint<typeof onGet>(); //equivalent to useEndpoint<EndpointData>
  // Early return for 404
  if (resource.state=='resolved' && !resource.resolved) {
    return <div>404: Product not found!!!</div>
  }
  // Normal rendering
  return (
    <Resource 
      resource={resource}
      onPending={() => <div>Loading...</div>}
      onError={() => <div>Error</div>}
      onResolved={() => (
        <>
          <h1>Product: {product.productId}</h1>
          <p>Price: {product.price}</p>
          <p>{product.description}</p>
        </>
      )}
    />
  );
});

3xx - Redirect

Sometimes you want to redirect a user from the current page to another page.

Let's say a user tries to go to a dashboard page, but has not logged in yet. We want them to be redirect to a log-in page so they can be authenticated.

// File: src/routes/dashboard.js
import {component$} from '@builder.io/qwik';
import {DocumentHead} from '@builder.io/qwik-city';
import {checkAuthorization} from '../utils' // Your authorization code
import type {DashboardData} from '../types' // Your types

export const onGet: EndpointHandler<DashboardData> = async ({ request, response }) => {
	const isAuthorized = checkAuthorization(request.headers.get('cookie'));

	if (!isAuthorized) {
		// User is not authorized!
		// Redirect to the log-in page
		return response.redirect('/login')
	} else {
		// ...
	}
};

The response.redirect function takes a url and optionally a status code as the second argument.

return response.redirect('/login', 301) // Permanent redirect

Redirect status codes are between 300-399.

If you do not provide a status code, Qwik City will default to a 307 temporary redirect status.

Read more about redirect status codes here.