Context - Fresh — ContextQMD

The Context instance is shared across all middlewares in Fresh. Use it to respond with HTML, trigger redirects, access the incoming Request or read other metadata.

`.config`

Contains the resolved Fresh configuration.

app.get("/", (ctx) => {
  console.log("Config: ", ctx.config);
  return new Response("hey");
});

`.url`

Contains a URL instance of the requested url.

app.get("/", (ctx) => {
  console.log("path: ", ctx.url.pathname);

  const hasParam = ctx.url.searchParams.has("q");
  return new Response(`Has q param: ${hasParam}`);
});

`.req`

Contains the incoming Request instance.

app.get("/", (ctx) => {
  console.log("Request: ", ctx.req);

  if (ctx.req.headers.has("X-Foo")) {
    // do something
  }

  return new Response("hello");
});

`.route`

Contains the matched route pattern as a string. Will be null if no pattern matched.

app.get("/foo/:id", (ctx) => {
  console.log(ctx.route); // Logs: "/foo/:id"
  // ...
});

`.params`

Contains the params of the matched route pattern.

app.get("/foo/:id", (ctx) => {
  console.log("id: ", ctx.params.id);

  return new Response(`Accessed: /foo/${ctx.params.id}`);
});

`.state`

Pass data to the next middlewares with state. Every request has its own state object.

interface State {
  text?: string;
}

const app = new App<State>();

app.use((ctx) => {
  ctx.state.text = "foo";
  return ctx.next();
});
app.use((ctx) => {
  console.log(ctx.state.text); // Logs: "foo"
  return ctx.next();
});

`.error`

If an error was thrown, this property will hold the caught value (default: null). This is typically used mainly on an error page.

app.onError((ctx) => {
  const message = ctx.error instanceof Error
    ? ctx.error.message
    : String(ctx.error);

  return new Response(message, { status: 500 });
});

`.redirect()`

Trigger a redirect from a middleware:

app.get("/old-url", (ctx) => {
  return ctx.redirect("/new-url");
});

Set a custom status code (default is 302):

app.get("/old-url", (ctx) => {
  return ctx.redirect("/new-url", 307);
});

`.render()`

Render JSX and create a HTML Response.

tsx

app.get("/", (ctx) => {
  return ctx.render(<h1>hello world</h1>);
});

Set custom response headers or other metadata:

tsx

app.get("/teapot", (ctx) => {
  return ctx.render(
    <h1>I'm a teapot</h1>,
    {
      status: 418,
      headers: {
        "X-Foo": "abc",
      },
    },
  );
});