Data fetching
Server side data fetching in Fresh is accomplished through asynchronous handler
functions. These handler functions can call a ctx.render()
function with the
data to be rendered as an argument. This data can then be retrieved by the page
component through the data
property on the props
.
Here is an example:
interface Project {
name: string;
stars: number;
}
export const handler: Handlers<Project> = {
async GET(_req, ctx) {
const project = await db.projects.findOne({ id: ctx.params.id });
if (!project) {
return new Response("Project not found", { status: 404 });
}
return ctx.render(project);
},
};
export default function ProjectPage(props: PageProps<Project>) {
return (
<div>
<h1>{props.data.name}</h1>
<p>{props.data.stars} stars</p>
</div>
);
}
The type parameter on the PageProps
, Handlers
, Handler
, and
HandlerContext
can be used to enforce a TypeScript type to use for the render
data. Fresh enforces during type checking that the types in all of these fields
are compatible within a single page.