resource + await/pending/error

resource — declarative async data

resource user(userId) => api.users.get(userId)

A resource declares async data. The argument list (userId) is its dependency: when userId changes, the resource refetches. The arrow body is the fetcher. The compiler wires this to React 19’s use + Suspense, including abort on dependency change — the ceremony you’d otherwise hand-write.

The dependency must be an identifier, not a member expression — alias a member through a derived first if needed.

await / pending / error — rendering the three states

In the view, render a resource’s three states explicitly:

view {
  await(user) {
    <Profile user={user} />
  } pending {
    <Spinner />
  } error(e) {
    <ErrorPanel error={e} />
  }
}

• await(r) { ... } renders when the resource has resolved; r is the data.
• pending { ... } renders while it’s loading.
• error(e) { ... } renders if it rejected; e is the error.

Modifiers — swr / cache / retry

Resources accept parameterized modifiers:

resource feed(page) => api.feed(page) swr cache(ttl: 30_000) retry(2)

• swr — serve stale data while revalidating.
• cache(ttl: D) — cache results for D ms.
• retry(N) — retry the fetch up to N times.

Next: actions & effects.