Mnigos
Mnigos
TtRPC
Created by Mnigos on 5/28/2025 in #❓-help
How to setup trpc with react router 7?
Okay I thing I got this. Maybe you can do it in simpler way but I couldn't find it. https://github.com/Mnigos/ai-shoping-list
4 replies
TtRPC
Created by Mnigos on 5/28/2025 in #❓-help
How to setup trpc with react router 7?
rest of the code: /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,
})
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)
}
}
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)
}
}
4 replies
TtRPC
Created by Mnigos on 9/29/2024 in #❓-help
How to use client and react-query simultaneously?
4 replies
TtRPC
Created by Mnigos on 9/29/2024 in #❓-help
How to use client and react-query simultaneously?
4 replies