TRPCClientProvider

packages/webui/src/trpc/TRPCClientProvider.tsx

@@ -0,0 +1,37 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { httpBatchLink } from "@trpc/client"
+import { ReactNode, useState } from "react"
+import { trpc } from "./trpc"
+
+
+export interface TRPCClientProviderProps {
+    children: ReactNode
+}
+
+
+export function TRPCClientProvider({ children }: TRPCClientProviderProps) {
+
+    const [queryClient] = useState(new QueryClient())
+
+    const [trpcClient] = useState(trpc.createClient({
+        links: [
+            httpBatchLink({
+                url: "http://localhost:8080/rpc",
+                headers: async () => ({}),
+            })
+        ]
+    }))
+
+
+    return (
+        <trpc.Provider
+            client={trpcClient}
+            queryClient={queryClient}
+        >
+            <QueryClientProvider client={queryClient}>
+                {children}
+            </QueryClientProvider>
+        </trpc.Provider>
+    )
+
+}

packages/webui/src/trpc/trpc.ts

@@ -2,4 +2,4 @@ import type { Router } from "@todo-tests/common/rpc"
 import { createTRPCReact } from "@trpc/react-query"
 
 
-export const trpc = createTRPCReact<Router>()
+export const trpc: ReturnType<typeof createTRPCReact<Router>> = createTRPCReact<Router>()