Files
home/Projects/kompose/news/apps/web/src/trpc-provider.tsx
2025-10-10 16:43:21 +02:00

43 lines
1.1 KiB
TypeScript

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import { useState } from "react";
import { trpc } from "./trpc";
import { constants } from "./constants";
import Cookies from "js-cookie";
import SuperJSON from "superjson";
export function TrpcProvider({ children }: { children: React.ReactNode }) {
const [queryClient] = useState(() => new QueryClient());
const [trpcClient] = useState(() =>
trpc.createClient({
links: [
httpBatchLink({
url: constants.trpcUrl,
fetch: async (input, init) => {
const response = await fetch(input, init);
if (response.status === 401) {
Cookies.remove("token");
window.location.href = "/";
}
return response;
},
async headers() {
return {
authorization: Cookies.get("token")
? `Bearer ${Cookies.get("token")}`
: undefined,
};
},
transformer: SuperJSON,
}),
],
}),
);
return (
<trpc.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</trpc.Provider>
);
}