tRPCClient.ts
For the full content of this gist, refer to https://gist.github.com/CodingAbdullah/fe44cab397b002bcb8af615cbfd0d47f
McMaster. Software Engineer with a keen interest in blockchain and web3.
'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpBatchLink } from '@trpc/client';
import { createTRPCReact } from '@trpc/react-query';
import { useState } from 'react';
import type { AppRouter } from '../../server/api/root';
const trpc = createTRPCReact<AppRouter>();
// TRPC provider setup client-side
export function TRPCProvider({ children }: { children: React.ReactNode }) {
const [queryClient] = useState(() => new QueryClient());
const [trpcClient] = useState(() =>
trpc.createClient({
links: [
httpBatchLink({
url: '/api/trpc'
})
]
})
);
return (
<trpc.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
</trpc.Provider>
);
}
export { trpc };