Capstone: a complete route

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

routes/dashboard.hemhem

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.