From 60b27fd8bcd8f317f60bc39c2f8b3f223553ceaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Sun, 7 Jul 2024 02:50:55 +0200
Subject: [PATCH] TRPCClientProvider

---
 .../webui/src/trpc/TRPCClientProvider.tsx     | 37 +++++++++++++++++++
 packages/webui/src/trpc/trpc.ts               |  2 +-
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 packages/webui/src/trpc/TRPCClientProvider.tsx

diff --git a/packages/webui/src/trpc/TRPCClientProvider.tsx b/packages/webui/src/trpc/TRPCClientProvider.tsx
new file mode 100644
index 0000000..5408969
--- /dev/null
+++ b/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>
+    )
+
+}
diff --git a/packages/webui/src/trpc/trpc.ts b/packages/webui/src/trpc/trpc.ts
index b644009..bb82294 100644
--- a/packages/webui/src/trpc/trpc.ts
+++ b/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>()