67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import { httpBatchLink } from "@trpc/client";
|
|
import { createTRPCReact } from "@trpc/react-query";
|
|
|
|
import { AppRouter } from "@server/shared/trpc/trpc.instance";
|
|
import { Session } from "next-auth";
|
|
|
|
const createQueryClient = () =>
|
|
new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
// With SSR, we usually want to set some default staleTime
|
|
// above 0 to avoid refetching immediately on the client
|
|
staleTime: 30 * 1000,
|
|
},
|
|
},
|
|
});
|
|
|
|
let clientQueryClientSingleton: QueryClient | undefined = undefined;
|
|
const getQueryClient = () => {
|
|
if (typeof window === "undefined") {
|
|
// Server: always make a new query client
|
|
return createQueryClient();
|
|
} else {
|
|
// Browser: use singleton pattern to keep the same query client
|
|
return (clientQueryClientSingleton ??= createQueryClient());
|
|
}
|
|
};
|
|
|
|
export const trpc = createTRPCReact<AppRouter>();
|
|
|
|
export function TRPCReactProvider(props: {
|
|
children: React.ReactNode
|
|
session: Session | null
|
|
}) {
|
|
const queryClient = getQueryClient();
|
|
|
|
const [trpcClient] = useState(() =>
|
|
trpc.createClient({
|
|
links: [
|
|
httpBatchLink({
|
|
url: process.env.NEXT_PUBLIC_APP_BASE_URL + `/api/trpc`,
|
|
headers() {
|
|
const token = props.session?.authToken;
|
|
|
|
return {
|
|
Authorization: token ? `Bearer ${token}` : undefined,
|
|
}
|
|
},
|
|
}),
|
|
],
|
|
}),
|
|
);
|
|
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<trpc.Provider client={trpcClient} queryClient={queryClient}>
|
|
{props.children}
|
|
</trpc.Provider>
|
|
</QueryClientProvider>
|
|
);
|
|
}
|
|
|