Files
home/Projects/kompose/news/apps/web/src/trpc-provider.tsx
2025-10-08 10:35:48 +02:00

43 lines
1.3 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>
)
}