TRPCClientProvider refactoring

packages/webui/src/todo/VTodo.tsx

@@ -9,7 +9,7 @@ import { trpc } from "../trpc/trpc"
 const encodeTodo = S.encodeSync(JsonifiableTodo)
 
 
-export namespace VTodo {
+export module VTodo {
     export interface Props {
         todo: Todo
     }

packages/webui/src/trpc/TRPCClientProvider.tsx

@@ -1,20 +1,22 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { createWSClient, httpBatchLink, splitLink, wsLink } from "@trpc/client"
-import { type ReactNode, useState } from "react"
+import { type ReactNode, useMemo, useState } from "react"
 import { trpc } from "./trpc"
 
 
-export interface TRPCClientProviderProps {
-    children?: ReactNode
+export module TRPCClientProvider {
+    export interface Props {
+        children?: ReactNode
+    }
 }
 
 
-export function TRPCClientProvider({ children }: TRPCClientProviderProps) {
+export function TRPCClientProvider({ children }: TRPCClientProvider.Props) {
 
     const [queryClient] = useState(new QueryClient())
     const [wsClient] = useState(createWSClient({ url: "/rpc" }))
 
-    const [trpcClient] = useState(trpc.createClient({
+    const trpcClient = useMemo(() => trpc.createClient({
         links: [
             splitLink({
                 condition: op => op.type === "subscription",
@@ -27,7 +29,7 @@ export function TRPCClientProvider({ children }: TRPCClientProviderProps) {
                 }),
             })
         ]
-    }))
+    }), [wsClient])
 
 
     return (