Files
web/lib/trpc/Provider.tsx
2024-04-18 13:53:49 +02:00

33 lines
945 B
TypeScript

"use client"
import { useState } from "react"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { httpBatchLink } from "@trpc/client"
import { env } from "@/env/client"
import { trpc } from "./client"
import { transformer } from "@/server/transformer"
function initializeTrpcClient() {
return trpc.createClient({
links: [
httpBatchLink({
transformer,
/**
* This is locally in Next.js
*/
url: `http://localhost:${env.NEXT_PUBLIC_PORT}/api/web/trpc`,
}),
],
})
}
export default function TrpcProvider({ children }: React.PropsWithChildren) {
const [queryClient] = useState(() => new QueryClient({}))
const [trpcClient] = useState(() => initializeTrpcClient())
return (
<trpc.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</trpc.Provider>
)
}