リクエスト処理

src/routes ディレクトリ内の各 layout.ts および index.ts ファイルは、現在の HTTP リクエスト、レスポンス、および URL にアクセスできます。これにより、データの取得と変更、さらにはカスタムコンテンツでの応答も可能になります。

Qwik City は、src/routes ディレクトリの階層に基づいたミドルウェアシステムを実装しています。このミドルウェアシステムは、HTTP リクエストとレスポンスを処理するために使用され、ページ、レイアウト、およびエンドポイントで使用できます。

各ルートは HTTP リクエストとレスポンスハンドラーを追加でき、開発者はデータを取得および変更できます。ハンドラーは、ページの HTML ではなくデータのみを返すエンドポイントでも使用できます。

この機能により、コンポーネントをレンダリングしてカスタムコンテンツで応答する直前に、任意のリクエストイベントを処理し、リクエストパイプラインに副作用を与えることができます。これはページ、レイアウト、エンドポイントルートで利用できますが、通常のコンポーネントでは利用できません。

リクエストおよびレスポンスハンドラー

ページ、レイアウト、およびエンドポイントでは、onGet、onPost、onPutなどのリクエストハンドラー関数を実装することにより、リクエストデータにアクセスできます。これらの関数は、このルートに使用されるHTTP メソッドに従って実行されます。

さらに、特定のメソッドではなく任意のリクエストメソッドを処理するために、ミドルウェアの形式で onRequest 関数を使用できます。たとえば、GET リクエストの場合、onGet と onRequest の両方が指定されている場合は、onGet が呼び出されます。ただし、このシナリオで、POST リクエストメソッドが来た場合、onPost が指定されていないため、onRequest ハンドラーが呼び出されます。onRequest は、特定のメソッドを持たない任意のリクエストメソッドに対するキャッチオールとして利用できます。

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}`,
  };
};

リクエストイベント

リクエストハンドラー関数は、次のプロパティを持つ RequestEvent 引数を受け取ります。

Cookie

interface Cookie {
  get: (key: string) => CookieValue | null;
  set: (key: string, value: string | number | Record<string, any>, options?: CookieOptions) => void;
  delete: (key: string) => void;
  has: (key: string) => boolean;
}

get クッキー名を指定した文字列を受け取り、存在する場合は CookieValue を返し、存在しない場合は null を返します。

interface CookieValue {
  value: string;
  json: <T = unknown>() => T;
  number: () => number;
}

クッキー値は、次の 3 つのフィールドを持つシンプルなレコードです。

1. value: クッキー値を文字列として格納します
2. json(): 値に対して JSON.parse() を実行し、結果を返します
3. number(): 値に対して Number() を実行し、結果を返します

getAll すべてのクッキーがある場合は、それらのクッキーを持つオブジェクトを返します。これは、クッキーの名前が不明で、解析する必要がある場合に必要になることがあります。

set キーと値を受け取り、レスポンスに追加されるヘッダーを作成します。値は string | number | Record<string, any> になります

3 番目の引数として、オプションで追加のフィールドを設定するための CookieOptions レコードを指定できます。

export interface CookieOptions {
  domain?: string;
  expires?: Date | string;
  httpOnly?: boolean;
  maxAge?: number | [number, 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks'];
  path?: string;
  sameSite?: 'lax' | 'none' | 'strict';
  secure?: boolean;
}

これらの属性とその値の詳細については、Set-Cookie ヘッダーに関する MDN の記事を参照してください。

delete 指定されたキーを持つヘッダーをクッキーに追加します。新しいヘッダーには、ブラウザに削除するように指示する expires フィールドに期限切れの日付が含まれます。

cookie.delete('my-cookie');
// equivalent to
cookie.set('my-cookie', 'deleted', new Date(0));
// or
cookie.set('my-cookie', '');

オプションで、クッキーを削除する際にパス、sameSite、および/またはドメインを設定できます。クッキーがパス/ドメインで作成された場合は、削除を有効にするためにこれらのフィールドを設定する必要があります。

cookie.delete('my-cookie', { domain: 'https://qwik.dokyumento.jp', path: '/docs/' });

has クッキーに指定されたキーが存在するかどうかを基に、true または false を返す便利なメソッドです。

cookie.has('my-cookie');