Effort 2 — Router adoption (loaders + useSuspenseQuery per feature)

[chiptus]

Part of #51. Depends on Effort 1. Behavioral changes, route-by-route.

What

Per feature, on routes that own the data: add a loader using context.queryClient.ensureQueryData(factory(...)), replace non-conditional useQuery reads with useSuspenseQuery(factory(...)) (deleting null-guards), and add an errorComponent. enabled/conditional queries stay useQuery (25 files use the pattern).

Pilot the festival → edition → set slice end-to-end first as the reference implementation reviewers sign off on before rollout.

Per-feature checklist (leaf-first order)

• festivals + editions + sets (pilot slice, end-to-end)
• stages
• genres
• festival-info
• custom-links
• knowledge
• artists (+ artist-notes)
• groups (+ invites)
• voting

Auth-dependent features are out of scope here — they wait on Effort 3 (#50).

Open questions to resolve here

• Confirm staleTime: 5_000 or override per-query so loader-prefetched data doesn't instantly refetch. — Confirmed: global 5_000 in src/main.tsx already matches the recommendation, no change needed.
• errorComponent: global default vs per-route. — Resolved: added defaultErrorComponent (src/components/layout/RouteErrorFallback.tsx) on the router in src/main.tsx, per-route only where bespoke handling is needed later.

[chiptus]

Starting notes (handoff from the Effort 1 session)

Effort 1 (#52) is complete and merged — every feature now has src/api/<feature>/ with per-endpoint queryOptions factories, which the loaders (ensureQueryData) and useSuspenseQuery calls here consume directly. Groundwork is in place.

Session decisions not yet reflected in this ticket:

• Open Q — staleTime: recommend a small default (staleTime: 5_000, or per-query) so loader-prefetched data doesn't instantly refetch on mount. Confirm during the pilot.
• Open Q — errorComponent: recommend a single global default errorComponent for the pilot; go per-route only where a route needs bespoke handling.
• Scope caveat — voting: it's in the checklist above but is auth-dependent (useUserVotes / useGroupVotes), so it can't prefetch until Effort 3 (Hoist auth session into router context (enable auth-dependent loader prefetch) #50) hoists the session into router context. Defer voting to after Hoist auth session into router context (enable auth-dependent loader prefetch) #50; keep its reads on useQuery for now.
• knowledge: removed in Effort 1 (dead code) — drop it from this checklist.
• id-normalization convention is the non-null assertion ! (not ?? ""), tracked in Standardize query-key id normalization on the non-null assertion (!) pattern across src/api #70.

Suggested first step: the festivals → edition → set pilot, end-to-end in one PR (route loader via ensureQueryData(factory(...)), convert non-conditional reads to useSuspenseQuery, add an errorComponent), get reviewer sign-off, then roll out leaf-first. enabled/conditional queries stay useQuery.

References: docs/HANDOFF_TANSTACK_ROUTER_QUERY.md (patterns + caveats), docs/adr/0001-api-modules.md, and any merged src/api/* slice for the factory shape.

---

Generated by Claude Code

[chiptus]

Pilot slice landed on claude/router-adoption-pilot-b0sv21 (7a2ab65).

What changed:

• src/routes/festivals/$festivalSlug.tsx: component now reads via useSuspenseQuery(festivalBySlugQuery(...)) instead of Route.useLoaderData(); loader keeps the ensureQueryData prefetch.
• src/routes/.../editions/$editionSlug/sets/$setSlug.tsx: added a loader — ensureQueryData(editionBySlugQuery(...)) (cheap, already cached by the parent route) to get edition.id, then ensureQueryData(setBySlugQuery(...)).
• src/pages/SetDetails.tsx: replaced the conditional useSetBySlugQuery (isLoading/!data guards) with useSuspenseQuery(setBySlugQuery(...)). Deleted the now-dead SetLoadingState/SetNotFoundState components.
• Added src/components/layout/RouteErrorFallback.tsx as the global defaultErrorComponent.

Deliberately left alone: FestivalEditionContext/FestivalEditionProvider (feeding EditionLayout and 15 other consumers) stays on useQuery with a nullable edition. It's mounted at the $festivalSlug layout level and also wraps the edition-selection index page where no edition is picked yet, so its enabled: !!editionSlug guard is a genuine conditional query, not leftover dead code — matches the "enabled queries stay useQuery" caveat. Converting it would mean touching all 16 consumers, which belongs to later checklist items (stages, schedule, artists, etc.), not this pilot.

Verified: pnpm run build, pnpm run lint, pnpm test (290 passed) all green.

Checked off the pilot box above; ready for review before rolling out to stages, genres, etc.

---

Generated by Claude Code