Pairing TanStack Query with TanStack Router

The pattern this site uses is short:

1. Define queryOptions once per resource.
2. In the route loader, call queryClient.ensureQueryData(options).
3. In the component, call useSuspenseQuery(options).

Because the router's SSR-Query integration dehydrates the cache, the data the server fetched is already on the client when React hydrates — no second request, no loading flash.

Keep the router's own defaultPreloadStaleTime at 0 so Query, not the router, decides when data is stale.