37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
"use client"
|
|
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
|
|
import { httpBatchLink } from "@trpc/client"
|
|
import { useState } from "react"
|
|
|
|
import { env } from "@/env/client"
|
|
import { transformer } from "@/server/transformer"
|
|
|
|
import { trpc } from "./client"
|
|
|
|
function initializeTrpcClient() {
|
|
// Locally we set nextjs to run on port to 3000 so that we always guarantee
|
|
// that trpc and next are running on the same port.
|
|
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>
|
|
)
|
|
}
|