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",
+          }),
         }),
       ],
     })

pages/chat/+Page.tsx

@@ -1,25 +1,33 @@
 import { Card, Textarea } from "@mantine/core";
 import { useState } from "react";
-import { useTRPC } from "../../trpc/client";
+import { useTRPCClient } from "../../trpc/client";
 
 export default function ChatPage() {
   const [inputMessage, setInputMessage] = useState("");
   const [loading, setLoading] = useState(false);
   const [outputMessage, setOutputMessage] = useState("");
-  const trpc = useTRPC();
+  const trpc = useTRPCClient();
 
   async function handleSendMessage() {
     setLoading(true);
-    const response = await trpc.chat.streamMessage.subscribe(
+
+    const subscription = trpc.chat.streamMessage.subscribe(
       {
         message: inputMessage,
       },
-      {}
+      {
+        onData(value) {
+          setOutputMessage((prevOutputMessage) => prevOutputMessage + value);
+        },
+        onError(error) {
+          console.error(error);
+        },
+        onComplete() {
+          subscription.unsubscribe();
+          setLoading(false);
+        },
+      }
     );
-    for await (const chunk of response) {
-      setOutputMessage(chunk);
-    }
-    setLoading(false);
   }
   return (
     <div>
@@ -33,6 +41,7 @@ export default function ChatPage() {
         onKeyDown={async (e) => {
           if (e.key === "Enter") {
             e.preventDefault();
+            handleSendMessage();
           }
         }}
       />