44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
|
|
import { httpBatchLink, loggerLink } 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: [
|
|
loggerLink({
|
|
enabled: (opts) =>
|
|
(env.NEXT_PUBLIC_NODE_ENV === "development" &&
|
|
typeof window !== "undefined") ||
|
|
(opts.direction === "down" && opts.result instanceof Error),
|
|
}),
|
|
httpBatchLink({
|
|
fetch,
|
|
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>
|
|
)
|
|
}
|