chore: update dependencies in pnpm-lock.yaml and package.json, including zod to version 4.3.6, @dokploy/trpc-openapi to version 0.0.13, and @trpc packages to version 11.10.0; refactor loading state handling in application components

apps/dokploy/utils/api.ts

@@ -1,14 +1,7 @@
-/**
- * This is the client-side entrypoint for your tRPC API. It is used to create the `api` object which
- * contains the Next.js App-wrapper, as well as your type-safe React Query hooks.
- *
- * We also create a few inference helpers for input and output types.
- */
-
 import {
 	createWSClient,
-	experimental_formDataLink,
 	httpBatchLink,
+	httpLink,
 	splitLink,
 	wsLink,
 } from "@trpc/client";
@@ -18,8 +11,8 @@ import superjson from "superjson";
 import type { AppRouter } from "@/server/api/root";
 
 const getBaseUrl = () => {
-	if (typeof window !== "undefined") return ""; // browser should use relative url
-	return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
+	if (typeof window !== "undefined") return "";
+	return `http://localhost:${process.env.PORT ?? 3000}`;
 };
 
 const getWsUrl = () => {
@@ -31,95 +24,62 @@ const getWsUrl = () => {
 	return `${protocol}${host}/drawer-logs`;
 };
 
-// Create WebSocket client with delayed connection
-const createLazyWSClient = () => {
+let wsClientSingleton: ReturnType<typeof createWSClient> | null = null;
+
+const getOrCreateWSClient = () => {
 	if (typeof window === "undefined") return null;
 
-	let actualClient: ReturnType<typeof createWSClient> | null = null;
+	if (!wsClientSingleton) {
+		wsClientSingleton = createWSClient({
+			url: getWsUrl()!,
+			lazy: { enabled: true, closeMs: 3000 },
+			retryDelayMs: () => 3000,
+		});
+	}
 
-	return {
-		request: (op: any, callbacks: any) => {
-			if (!actualClient) {
-				const wsUrl = getWsUrl();
-				if (wsUrl) {
-					actualClient = createWSClient({ url: wsUrl });
-				}
-			}
-			return actualClient?.request(op, callbacks) || (() => {});
-		},
-		close: () => {
-			if (actualClient) {
-				actualClient.close();
-				actualClient = null;
-			}
-		},
-		getConnection: () => {
-			if (!actualClient) {
-				const wsUrl = getWsUrl();
-				if (wsUrl) {
-					actualClient = createWSClient({ url: wsUrl });
-				}
-			}
-			return actualClient!.getConnection();
-		},
-	};
+	return wsClientSingleton;
 };
 
-const wsClient = createLazyWSClient();
+const wsClient = getOrCreateWSClient();
 
-/** A set of type-safe react-query hooks for your tRPC API. */
-export const api = createTRPCNext<AppRouter>({
-	config() {
-		return {
-			/**
-			 * Transformer used for data de-serialization from the server.
-			 *
-			 * @see https://trpc.io/docs/data-transformers
-			 */
-			transformer: superjson,
-
-			/**
-			 * Links used to determine request flow from client to server.
-			 *
-			 * @see https://trpc.io/docs/links
-			 */
-			links: [
+const links =
+	typeof window !== "undefined"
+		? [
 				splitLink({
 					condition: (op) => op.type === "subscription",
 					true: wsLink({
 						client: wsClient!,
+						transformer: superjson,
 					}),
 					false: splitLink({
 						condition: (op) => op.input instanceof FormData,
-						true: experimental_formDataLink({
+						true: httpLink({
 							url: `${getBaseUrl()}/api/trpc`,
+							transformer: superjson,
 						}),
 						false: httpBatchLink({
 							url: `${getBaseUrl()}/api/trpc`,
+							transformer: superjson,
 						}),
 					}),
 				}),
-			],
+			]
+		: [
+				httpBatchLink({
+					url: `${getBaseUrl()}/api/trpc`,
+					transformer: superjson,
+				}),
+			];
+
+export const api = createTRPCNext<AppRouter>({
+	config() {
+		return {
+			transformer: superjson,
+			links,
 		};
 	},
-	/**
-	 * Whether tRPC should await queries when server rendering pages.
-	 *
-	 * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
-	 */
 	ssr: false,
 });
 
-/**
- * Inference helper for inputs.
- *
- * @example type HelloInput = RouterInputs['example']['hello']
- */
 export type RouterInputs = inferRouterInputs<AppRouter>;
-
-/**
- * Inference helper for outputs.
- *
- * @example type HelloOutput = RouterOutputs['example']['hello']
- */
 export type RouterOutputs = inferRouterOutputs<AppRouter>;