example of SSE streaming

layouts/LayoutDefault.tsx

@@ -32,7 +32,12 @@ import {
   useMutation,
   useQuery,
 } from "@tanstack/react-query";
-import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import {
+  createTRPCClient,
+  httpBatchLink,
+  httpSubscriptionLink,
+  splitLink,
+} from "@trpc/client";
 import type { AppRouter } from "../trpc/router.js";
 
 function makeQueryClient() {
@@ -74,9 +79,16 @@ export default function LayoutDefault({
   const [trpc] = useState(() =>
     createTRPCClient<AppRouter>({
       links: [
-        httpBatchLink({
-          url: "/api/trpc",
-          methodOverride: "POST",
+        splitLink({
+          // uses the httpSubscriptionLink for subscriptions
+          condition: (op) => op.type === "subscription",
+          true: httpSubscriptionLink({
+            url: "/api/trpc",
+          }),
+          false: httpBatchLink({
+            url: "/api/trpc",
+            methodOverride: "POST",
+          }),
         }),
       ],
     })