47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
|
import { httpBatchLink } from '@trpc/client'
|
|
import superjson from 'superjson'
|
|
import { trpc } from '@/lib/trpc-client'
|
|
|
|
function getBaseUrl() {
|
|
if (typeof window !== 'undefined') return ''
|
|
if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`
|
|
return `http://localhost:${process.env.PORT ?? 3000}`
|
|
}
|
|
|
|
export default function TrpcProvider({ children }: { children: React.ReactNode }) {
|
|
const [queryClient] = useState(
|
|
() =>
|
|
new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
staleTime: 5 * 1000,
|
|
},
|
|
},
|
|
})
|
|
)
|
|
|
|
const [trpcClient] = useState(() =>
|
|
trpc.createClient({
|
|
links: [
|
|
httpBatchLink({
|
|
url: `${getBaseUrl()}/api/trpc`,
|
|
fetch(url, options) {
|
|
return fetch(url, { ...options, credentials: 'include' })
|
|
},
|
|
}),
|
|
],
|
|
transformer: superjson,
|
|
})
|
|
)
|
|
|
|
return (
|
|
<trpc.Provider client={trpcClient} queryClient={queryClient}>
|
|
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
|
</trpc.Provider>
|
|
)
|
|
}
|