---
title: "Capstone: a complete route"
image: "https://hem.run/social/hem.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://hem.run/llms.txt
> Use this file to discover all available pages before exploring further.

# Capstone: a complete route

The following example combines these features in a React Router module on Workers:

```hem title="routes/dashboard.hem"
import { Effect } from "effect"
import { Users, Orgs, UserNotFound } from "../domain"
import { AppLayer } from "../layers"
import type { Route } from "./+types/dashboard"

let load = (id: string) => effect {
  let users = Users!
  and orgs  = Orgs!
  let user     = users.findById(id)!
  and orgList  = orgs.forUser(id)!
  let Some(u) = user else raise UserNotFound({ id })
  { user: u, orgs: orgList }
} catch {
| UserNotFound(_) => ({ user: anonymous, orgs: [] })
}

export let loader = ({ params }: Route.LoaderArgs) =>
  load(params.userId) |> Effect.provide(AppLayer) |> Effect.runPromise

export default ({ loaderData }: Route.ComponentProps) =>
  <main>
<h1>{loaderData.user.name}</h1>
{if loaderData.orgs.length > 0 {
  <ul>{loaderData.orgs.map((o) => <li key={o.id}>{o.name}</li>)}</ul>
}}
  </main>
```

Two services yielded concurrently, two fetches raced, absence handled with a guard, a typed error caught into a default, provided and run at the edge, rendered with checked conditionals. And the emitted TypeScript is readable without prior knowledge of Hem.

Source: https://hem.run/tour/capstone-a-complete-route/index.mdx