/app/lib/trpc/server.ts
import { createTRPCOptionsProxy} from '@trpc/tanstack-react-query'import { appRouter } from '~/server/main'import { createTRPCContext } from '~/server/trpc'import { getQueryClient } from './react'export const trpc = createTRPCOptionsProxy({ ctx: createTRPCContext, queryClient: getQueryClient, router: appRouter,})
/app/lib/trpc/utils.tsx
import { dehydrate } from '@tanstack/react-query'import { HydrationBoundary } from '@tanstack/react-query'import type { TRPCQueryOptions } from '@trpc/tanstack-react-query'import type { PropsWithChildren } from 'react'import { getQueryClient } from './react'export function HydrateClient(props: PropsWithChildren) { const queryClient = getQueryClient() return ( <HydrationBoundary state={dehydrate(queryClient)}> {props.children} </HydrationBoundary> )}export function prefetch< TQueryOptions extends ReturnType<TRPCQueryOptions<any>>,>(queryOptions: TQueryOptions) { const queryClient = getQueryClient() if (queryOptions.queryKey[1]?.type === 'infinite') { void queryClient.prefetchInfiniteQuery(queryOptions as any) } else { void queryClient.prefetchQuery(queryOptions) }}