fix: trpc client

apps/app/src/lib/trpc/client.ts

@@ -1,4 +1,34 @@
+import SuperJSON from "superjson"
+
 import { type AppRouter } from "@/api/_app"
-import { createTRPCReact } from "@trpc/react-query"
+import { createTRPCReact, httpBatchLink, loggerLink } from "@trpc/react-query"
+
+import { getUrl } from "./utils"
 
 export const trpc = createTRPCReact<AppRouter>({})
+
+export const trpcClient = trpc.createClient({
+    transformer: SuperJSON,
+    links: [
+      // adds pretty logs to your console in development and logs errors in production
+      loggerLink({
+        enabled: (opts) =>
+          (process.env.NODE_ENV === "development" && typeof window !== "undefined") ||
+          (opts.direction === "down" && opts.result instanceof Error),
+      }),
+      // splitLink({
+      //   condition(op) {
+      //     return op.type === "subscription"
+      //   },
+      //   true: wsLink({
+      //     client: wsClient,
+      //   }),
+      //   false: httpBatchLink({
+      //     url: getUrl(),
+      //   }),
+      // }),
+      httpBatchLink({
+        url: getUrl(),
+      }),
+    ],
+  })

apps/app/src/lib/trpc/provider.tsx

@@ -1,17 +1,15 @@
 "use client"
 import React, { useState } from "react"
 import { useRouter } from "next/navigation"
-import SuperJSON from "superjson"
 
 import { AppRouter } from "@/api/_app"
 import { useDictionary } from "@/contexts/dictionary/utils"
 import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query"
-import { httpBatchLink, loggerLink, TRPCClientErrorLike } from "@trpc/client"
+import { TRPCClientErrorLike } from "@trpc/client"
 
 import { handleMutationError, handleQueryError } from "../utils/client-utils"
 
-import { trpc } from "./client"
-import { getUrl } from "./utils"
+import { trpc, trpcClient } from "./client"
 
 const testNoDefaultErrorHandling = (query: unknown) =>
   typeof query === "object" &&
@@ -43,34 +41,7 @@ export default function TrpcProvider({ children }: { children: React.ReactNode }
         }),
       })
   )
-
-  const [trpcClient] = useState(() =>
-    trpc.createClient({
-      transformer: SuperJSON,
-      links: [
-        // adds pretty logs to your console in development and logs errors in production
-        loggerLink({
-          enabled: (opts) =>
-            (process.env.NODE_ENV === "development" && typeof window !== "undefined") ||
-            (opts.direction === "down" && opts.result instanceof Error),
-        }),
-        // splitLink({
-        //   condition(op) {
-        //     return op.type === "subscription"
-        //   },
-        //   true: wsLink({
-        //     client: wsClient,
-        //   }),
-        //   false: httpBatchLink({
-        //     url: getUrl(),
-        //   }),
-        // }),
-        httpBatchLink({
-          url: getUrl(),
-        }),
-      ],
-    })
-  )
+
   return (
     <trpc.Provider client={trpcClient} queryClient={queryClient}>
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>