From 188e6a8184211f166d799d39b997ba37b0ee8552 Mon Sep 17 00:00:00 2001
From: Alex / KATT <alexander@n1s.se>
Date: Sun, 19 May 2024 18:15:49 +0200
Subject: [PATCH] feat(server + client): streaming mutations and queries over
 HTTP (#5700)

---
 src/client/index.ts | 10 ++++++++--
 src/server/index.ts |  8 ++++++++
 src/server/trpc.ts  |  6 +++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/client/index.ts b/src/client/index.ts
index 0d4cabb1..e613c6bb 100644
--- a/src/client/index.ts
+++ b/src/client/index.ts
@@ -1,7 +1,7 @@
 /**
  * This is the client-side code that uses the inferred types from the server
  */
-import { createTRPCClient, httpBatchLink } from '@trpc/client';
+import { createTRPCClient, unstable_httpBatchStreamLink } from '@trpc/client';
 /**
  * We only import the `AppRouter` type from the server - this is not available at runtime
  */
@@ -10,7 +10,7 @@ import type { AppRouter } from '../server/index.js';
 // Initialize the tRPC client
 const trpc = createTRPCClient<AppRouter>({
   links: [
-    httpBatchLink({
+    unstable_httpBatchStreamLink({
       url: 'http://localhost:3000',
     }),
   ],
@@ -34,3 +34,9 @@ console.log('Created user:', createdUser);
 const user = await trpc.user.byId.query('1');
 //    ^?
 console.log('User 1:', user);
+
+const iterable = await trpc.examples.iterable.query();
+
+for await (const i of iterable) {
+  console.log('Iterable:', i);
+}
diff --git a/src/server/index.ts b/src/server/index.ts
index a2f5a0a1..2f97725f 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -32,6 +32,14 @@ const appRouter = router({
         return user;
       }),
   },
+  examples: {
+    iterable: publicProcedure.query(async function* () {
+      for (let i = 0; i < 3; i++) {
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        yield i;
+      }
+    }),
+  },
 });
 
 // Export type router type signature, this is used by the client.
diff --git a/src/server/trpc.ts b/src/server/trpc.ts
index 2a9aec85..4fb28c82 100644
--- a/src/server/trpc.ts
+++ b/src/server/trpc.ts
@@ -4,7 +4,11 @@ import { initTRPC } from '@trpc/server';
  * Initialization of tRPC backend
  * Should be done only once per backend!
  */
-const t = initTRPC.create();
+const t = initTRPC.create({
+  experimental: {
+    iterablesAndDeferreds: true,
+  },
+});
 
 /**
  * Export reusable router and procedure helpers