lazy-prefetch-pattern

# Lazy prefetch pattern Start optional server prefetches early without awaiting them so they can stream through React hydration without blocking rendering. - Import `preloadQuery` from `@/trpc/preload-query` and use the request-cached `getQueryClient()` from `@/trpc/server` for consumers beneath `HydrateClient`. - For normal queries, pass `queryClient.query(trpc.foo.bar.queryOptions(...))` to `preloadQuery`. For infinite queries, use `queryClient.infiniteQuery(trpc.foo.list.infiniteQueryOptions(...))`, including the procedure's cursor and `getNextPageParam` options. - Start optional preloads with `void preloadQuery(...)`. The helper handles caller-facing rejection; the cache retains query errors. An already-dehydrated pending promise can still reject. - Guard conditional preloads before invoking them. Imperative fetching does not honor `enabled: false` as a skip, and invoking `skipToken` options produces a missing-query-function error. - Preserve existing awaited settings preloads and deliberately isolated query clients. A custom `HydrationBoundary` must dehydrate the same client used for its preloads. ```tsx import { preloadQuery } from "@/trpc/preload-query"; import { getQueryClient, trpc } from "@/trpc/server"; const queryClient = getQueryClient(); void preloadQuery( queryClient.query(trpc.settings.getModelPreferences.queryOptions()) ); ``` Render the consumers beneath the matching hydration boundary. `query()` applies any `select` callback while the cache retains the raw result; selector failures are handled by `preloadQuery` too. This depends on `trpc/query-client.ts` dehydrating pending queries and using SuperJSON for serialization and hydration. Preserve those settings when using this pattern.