import type { RequestHandler } from '@builder.io/qwik-city';
 
export const onRequest: RequestHandler = async ({next, url}) => {
  console.log('Before request', url);
  await next();
  console.log('After request', url);
};

// Called only with a specific HTTP method
export const onGet: RequestHandler = async (requestEvent) => { ... }
export const onPost: RequestHandler = async (requestEvent) => { ... }
export const onPut: RequestHandler = async (requestEvent) => { ... }
export const onPatch: RequestHandler = async (requestEvent) => { ... }
export const onDelete: RequestHandler = async (requestEvent) => { ... }

src/
└── routes/
    ├── layout.tsx            # Invocation order: 1 (first)
    └── api/
        ├── layout.tsx        # Invocation order: 2   
        └── greet/
            └── index.ts      # Invocation order: 3 (last)

</CodeSandbox>


## `RequestEvent`

All middleware functions are passed a `RequestEvent` object which can be used to control the flow of HTTP response. For example, you can read/write cookies, headers, redirect, produce responses and exit the middleware chain early. Middleware functions are executed in the order as described above, from the topmost `layout.tsx` to the last `index.tsx`. 


### `next()`

Use the `next()` function to execute the next middleware function in the chain. This is the default behavior when a middleware function returns normally, without an explicit call to `next()`. One can use the `next()` function to achieve a wrapping behavior around the next middleware function.

<CodeSandbox src="/src/routes/demo/qwikcity/middleware/next/index.tsx">
```tsx /next()/
import { type RequestHandler } from '@builder.io/qwik-city';

// Generic function `onRequest` is executed first
export const onRequest: RequestHandler = async ({ next, sharedMap, json }) => {
  const log: string[] = [];
  sharedMap.set('log', log);

  log.push('onRequest start');
  await next(); // Execute next middleware function (onGet)
  log.push('onRequest end');

  json(200, log);
};

// Specific functions such as `onGet` are executed next
export const onGet: RequestHandler = async ({ next, sharedMap }) => {
  const log = sharedMap.get('log') as string[];

  log.push('onGET start');
  // execute next middleware function
  // (in our case, there are no more middleware functions nor components.)
  await next();
  log.push('onGET end');
};

</CodeSandbox>

### `sharedMap`

Use `sharedMap` as a way to share data between middleware functions. The `sharedMap` is scoped to HTTP request. A common use case is to use `sharedMap` to store user details so that it can be used by other middleware functions, `routeLoader$()` or components.


<CodeSandbox src="/src/routes/demo/qwikcity/middleware/sharedMap/index.tsx">
```tsx
import { component$ } from '@builder.io/qwik';
import {
  routeLoader$,
  type RequestHandler,
  type Cookie,
} from '@builder.io/qwik-city';

interface User {
  username: string;
  email: string;
}

export const onRequest: RequestHandler = async ({
  sharedMap,
  cookie,
  send,
}) => {
  const user = loadUserFromCookie(cookie);
  if (user) {
    sharedMap.set('user', user);
  } else {
    throw send(401, 'NOT_AUTHORIZED');
  }
};

function loadUserFromCookie(cookie: Cookie): User | null {
  // this is where you would check cookie for user.
  if (cookie) {
    // just return mock user for this demo.
    return {
      username: `Mock User`,
      email: `[email protected]`,
    };
  } else {
    return null;
  }
}

export const useUser = routeLoader$(({ sharedMap }) => {
  return sharedMap.get('user') as User;
});

export default component$(() => {
  const log = useUser();
  return (
    <div>
      {log.value.username} ({log.value.email})
    </div>
  );
});

</CodeSandbox>

### `cookie`

Use `cookie` to set and retrieve cookie information for a request. Middleware can manually read and set cookies, using the `cookie` function. This might be useful for setting a session cookie, such as a JWT token, or a cookie to track a user.

<CodeSandbox src="/src/routes/demo/qwikcity/middleware/cookie/index.tsx">
```tsx
import { type RequestHandler } from '@builder.io/qwik-city';

export const onGet: RequestHandler = async ({ cookie, json }) => {
  let count = cookie.get('Qwik.demo.count')?.number() || 0;
  count++;
  cookie.set('Qwik.demo.count', count);
  json(200, { count });
};

</CodeSandbox>

### `url`


Returns current HTTP request URL. (Use `useLocation()` if you need the current URL in a component. The `url` is meant for middleware functions.)


<CodeSandbox src="/src/routes/demo/qwikcity/middleware/url/index.tsx">
```tsx
import { type RequestHandler } from '@builder.io/qwik-city';

export const onGet: RequestHandler = async ({ url, json }) => {
  json(200, { url: url.toString() });
};

</CodeSandbox>


### `params`

Retrieve the "params" of the URL. For example `params.myId` will allow you to retrieve the `myId` from this route definition `/base/[myId]/something`.



<CodeSandbox src="/src/routes/demo/qwikcity/middleware/params/[myId]/index.tsx" url="/src/routes/demo/qwikcity/middleware/params/some-id/">
```tsx
import { type RequestHandler } from '@builder.io/qwik-city';

export const onGet: RequestHandler = async ({ params, json }) => {
  json(200, { params });
};

</CodeSandbox>

### `parseBody()`

Use `parseBody()` to parse form data submitted to the URL.

This method will check the request headers for a `Content-Type` header and parse the body accordingly. It supports `application/json`, `application/x-www-form-urlencoded`, and `multipart/form-data` content types.

If the `Content-Type` header is not set, it will return `null`.

<CodeSandbox src="/src/routes/demo/qwikcity/middleware/parseBody/index.tsx">
```tsx
import { type RequestHandler } from '@builder.io/qwik-city';

export const onGet: RequestHandler = async ({ html }) => {
  html(
    200,
    `
      <form id="myForm" method="POST">
        <input type="text" name="project" value="Qwik"/>
        <input type="text" name="url" value="http://qwik.dev"/>
      </form>
      <script>myForm.submit()</script>`
  );
};

export const onPost: RequestHandler = async ({ parseBody, json }) => {
  json(200, { body: await parseBody() });
};

</CodeSandbox>

### `platform`

Deployment platform (Azure, Bun, Cloudflare, Deno, Google Cloud Run, Netlify, Node.js, Vercel, etc...) specific API.

<CodeSandbox src="/src/routes/demo/qwikcity/middleware/platform/index.tsx">
```tsx
import { type RequestHandler } from '@builder.io/qwik-city';

export const onGet: RequestHandler = async ({ platform, json }) => {
  json(200, Object.keys(platform));
};

</CodeSandbox>

### `status()`

Set the status of the response independently of writing the response, useful for streaming. Endpoints can manually change the HTTP status code of the response, using the `status()` method.


<CodeSandbox src="/src/routes/demo/qwikcity/middleware/status/index.tsx">
```tsx
import { type RequestHandler } from '@builder.io/qwik-city';

export const onGet: RequestHandler = async ({ status, getWritableStream }) => {
  status(200);
  const stream = getWritableStream();
  const writer = stream.getWriter();
  writer.write(new TextEncoder().encode('Hello World!'));
  writer.close();
};

</CodeSandbox>

### `error()`

Set an error response.

<CodeSandbox src="/src/routes/demo/qwikcity/middleware/error/index.tsx">
```tsx
import { type RequestHandler } from '@builder.io/qwik-city';

export const onGet: RequestHandler = async ({ error }) => {
  throw error(500, 'ERROR: Demonstration of an error response.');
};

</CodeSandbox>



### `html()`

Send an HTML response.

<CodeSandbox src="/src/routes/demo/qwikcity/middleware/html/index.tsx">
```tsx
import { type RequestHandler } from '@builder.io/qwik-city';

export const onGet: RequestHandler = async ({ html }) => {
  html(
    200,
    ` 
      <html>
        <body>
          <h1>HTML response</h1>
        </body>
      </html>`
  );
};

</CodeSandbox>

### `send()`

Creating a raw endpoint is as simple as calling the `send(Response)` method. The `send()` method takes a standard `Response` object, which can be created using the `Response` constructor.

<CodeSandbox src="/src/routes/demo/qwikcity/middleware/send/index.tsx">
```tsx
import type { RequestHandler } from '@builder.io/qwik-city';

export const onGet: RequestHandler = async ({send}) => {
  const response = new Response('Hello World', {
    status: 200,
    headers: {
      'Content-Type': 'text/plain',
    },
  });
  send(response);
};

</CodeSandbox>

### `env`

Retrieve environmental property in a platform-independent way.

<CodeSandbox src="/src/routes/demo/qwikcity/middleware/env/index.tsx">
```tsx
import { type RequestHandler } from '@builder.io/qwik-city';

export const onGet: RequestHandler = async ({ env, json }) => {
  json(200, {
    USER: env.get('USER'),
    MODE_ENV: env.get('MODE_ENV'),
    PATH: env.get('PATH'),
    SHELL: env.get('SHELL'),
  });
};

</CodeSandbox>


### `headerSent`


Check to see if the header has been set.

<CodeSandbox src="/src/routes/demo/qwikcity/middleware/headerSent/index.tsx">
```tsx
import { type RequestHandler } from '@builder.io/qwik-city';

export const onGet: RequestHandler = async ({ headersSent, json }) => {
  if (!headersSent) {
    json(200, { response: 'default response' });
  }
};

export const onRequest: RequestHandler = async ({ status }) => {
  status(200);
};

</CodeSandbox>