53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
'use client'
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental'
|
|
import { httpBatchLink } from "@trpc/client";
|
|
import React, { useState } from "react"
|
|
import superjson from "superjson";
|
|
import { trpc } from "./Client";
|
|
import getBaseUrl from "~/app/_trpc/GetBaseUrl";
|
|
let clientQueryClient: QueryClient | undefined = undefined;
|
|
const makeQueryClient = () => new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
experimental_prefetchInRender: true
|
|
}
|
|
}
|
|
});
|
|
function getQueryClient() {
|
|
if (typeof window === "undefined") {
|
|
// Server: always make a new query client
|
|
return makeQueryClient();
|
|
} else {
|
|
// Browser: make a new query client if we don't already have one
|
|
if (!clientQueryClient) clientQueryClient = makeQueryClient();
|
|
return clientQueryClient;
|
|
}
|
|
}
|
|
export default function TrpcProvider({ children }: { children: React.ReactNode }) {
|
|
console.log("provider calls get base url")
|
|
const baseUrl = getBaseUrl()
|
|
console.log("provider got baseurl:", baseUrl)
|
|
const queryClient = getQueryClient();
|
|
const [trpcClient] = useState(() => {
|
|
return trpc.createClient({
|
|
links: [
|
|
httpBatchLink({
|
|
url: `${baseUrl}/api/trpc`,
|
|
transformer: superjson,
|
|
}),
|
|
],
|
|
})
|
|
});
|
|
|
|
return (
|
|
<trpc.Provider client={trpcClient} queryClient={queryClient}>
|
|
<QueryClientProvider client={queryClient}>
|
|
<ReactQueryStreamedHydration>
|
|
{children}
|
|
</ReactQueryStreamedHydration>
|
|
</QueryClientProvider>
|
|
</trpc.Provider>
|
|
)
|
|
}
|