Application and Layout wrappers as async

[mcgear]

Is it currently possible to look at making the Application and Layout wrappers async?

currently looking at adding some usage of the deno kv oauth plugin, like get session id around the whole app, or in a layout in a sub folder.

I am getting errors when i do that.

Any initial thoughts?

[marvinhagemeister]

@mcgear Both async layouts and async app wrapper is possible and we're using that in some of our projects in production. Can you share what kind of errors you are getting?

[mcgear]

I took my _app.tsx file and just added async to the function:

import { AppProps } from "$fresh/server.ts"; import NavbarBranded from "../islands/NavBarBranded.tsx";

export default async function App({ Component }: AppProps) { return (

); }

And now i get this:

[mcgear]

Also curious if Islands can be written as async for use of things like fetch... Maybe i have some versions out of sync or something?

[mcgear]

What projects in production use it that i could checkout and compare with?

[marvinhagemeister]

@mcgear Adding the async keyword is not enough as also the arguments change, see https://fresh.deno.dev/docs/concepts/app-wrapper#async-app-wrapper .

- export default async function App({ Component }: AppProps) {
+ export default async function App(req: Request, ctx: AppContext) {
    // ...
  }

The easiest way to avoid such issues is via the defineApp helper, because they are already strongly typed. This reduces the risk of getting the types wrong yourself.

export default defineApp((request, context) => {
  // ...
});

Note, that there is also defineLayout and defineRoute respectively for async routes and layouts.

[mcgear]

I missed that in the documentation, thank you for the clarification on this!