Connection status

Author: sebasptsch

apps/client/src/components/ConnectionStatus.tsx

@@ -0,0 +1,38 @@
+import type { TRPCConnectionState } from "@trpc/client/unstable-internals";
+import { useEffect, useState } from "react";
+import { wsClient } from "utils/trpc";
+
+const useConntectionStatus = () => {
+	const [connectionState, setConnectionState] =
+		useState<TRPCConnectionState<unknown> | null>(null);
+
+	useEffect(() => {
+		const { unsubscribe } = wsClient.connectionState.subscribe({
+			next: (state) => {
+				setConnectionState(state);
+			},
+		});
+
+		return () => unsubscribe();
+	}, []);
+
+	return connectionState;
+};
+
+export const ConnectionStatus = () => {
+	const connectionState = useConntectionStatus();
+
+	console.log("Connection State:", connectionState?.state);
+
+	if (!connectionState) return <div className="badge">Loading...</div>;
+
+	if (connectionState.state === "connecting") {
+		return <div className="badge badge-accent">Connecting</div>;
+	}
+
+	if (connectionState.state === "idle") {
+		return <div className="badge badge-success">Idle</div>;
+	}
+
+	return <div className="badge badge-success">Connected</div>;
+};

apps/client/src/routes/__root.tsx

@@ -6,6 +6,7 @@ import {
 	Outlet,
 } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+import { ConnectionStatus } from "components/ConnectionStatus";
 
 export const Route = createRootRouteWithContext<{
 	queryClient: QueryClient;
@@ -25,6 +26,9 @@ function RootComponent() {
 	return (
 		<>
 			<div className="w-screen h-screen relative overflow-x-hidden">
+				<div className="absolute top-2 mx-auto left-0 right-0 w-fit z-50">
+					<ConnectionStatus />
+				</div>
 				<div className={"absolute min-h-full"}>
 					<Outlet />
 				</div>

apps/client/src/utils/trpc.ts

@@ -7,14 +7,15 @@ const secure = location.protocol === "https:";
 
 export const queryClient = new QueryClient();
 
+export const wsClient = createWSClient({
+  url: `${secure ? "wss" : "ws"}://${location.host}/trpc`,
+})
+
 const trpcClient = createTRPCClient<AppRouter>({
   links: [wsLink({
-    client: createWSClient({
-      url: `${secure ? "wss" : "ws"}://${location.host}/trpc`,
-    }),
+    client: wsClient,
   }),],
 });
-
 export const trpc = createTRPCOptionsProxy<AppRouter>({
   client: trpcClient,
   queryClient,