feat(server + client): add support for server-sent events (SSE)

.github/workflows/main.yml

@@ -88,7 +88,7 @@ jobs:
             next-minimal-starter,
             next-prisma-starter,
             next-prisma-todomvc,
-            next-prisma-websockets-starter,
+            next-prisma-sse-subscriptions,
             soa,
             standalone-server,
             vercel-edge-runtime,

.github/workflows/subtree.yml

@@ -17,7 +17,7 @@ jobs:
         path: [
             #
             next-prisma-starter,
-            next-prisma-websockets-starter,
+            next-prisma-sse-subscriptions,
             next-prisma-todomvc,
             next-minimal-starter,
             next-big-router,

examples/minimal/src/client/index.ts

@@ -1,7 +1,12 @@
 /**
  * This is the client-side code that uses the inferred types from the server
  */
-import { createTRPCClient, httpBatchLink } from '@trpc/client';
+import {
+  createTRPCClient,
+  splitLink,
+  unstable_httpBatchStreamLink,
+  unstable_httpSubscriptionLink,
+} from '@trpc/client';
 /**
  * We only import the `AppRouter` type from the server - this is not available at runtime
  */
@@ -10,8 +15,14 @@ import type { AppRouter } from '../server/index.js';
 // Initialize the tRPC client
 const trpc = createTRPCClient<AppRouter>({
   links: [
-    httpBatchLink({
-      url: 'http://localhost:3000',
+    splitLink({
+      condition: (op) => op.type === 'subscription',
+      true: unstable_httpSubscriptionLink({
+        url: 'http://localhost:3000',
+      }),
+      false: unstable_httpBatchStreamLink({
+        url: 'http://localhost:3000',
+      }),
     }),
   ],
 });
@@ -34,3 +45,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);
+}

examples/minimal/src/server/index.ts

@@ -2,6 +2,7 @@
  * This a minimal tRPC server
  */
 import { createHTTPServer } from '@trpc/server/adapters/standalone';
+import { observable } from '@trpc/server/observable';
 import { z } from 'zod';
 import { db } from './db.js';
 import { publicProcedure, router } from './trpc.js';
@@ -32,6 +33,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.

examples/minimal/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

examples/next-prisma-sse-subscriptions/.env

@@ -0,0 +1,4 @@
+DATABASE_URL="postgresql://postgres:@localhost:5432/trpc-starter-websockets?schema=public"
+APP_URL="http://localhost:3000"
+NEXTAUTH_URL="http://localhost:3000/api/auth"
+NEXTAUTH_SECRET="override-me"

examples/next-prisma-sse-subscriptions/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/next-prisma-websockets-starter/README.md → examples/next-prisma-sse-subscriptions/README.md

@@ -1,12 +1,12 @@
-# Prisma + tRPC + WebSockets
+# Prisma + tRPC + SSE
 
 Try demo http://websockets.trpc.io/
 
 ## Features
 
 - 🧙‍♂️ E2E type safety with [tRPC](https://trpc.io)
 - ⚡ Full-stack React with Next.js
-- ⚡ WebSockets / Subscription support
+- ⚡ Server-sent-events / Subscription support
 - ⚡ Database with Prisma
 - 🔐 Authorization using [next-auth](https://next-auth.js.org/)
 - ⚙️ VSCode extensions

examples/next-prisma-websockets-starter/next.config.js → examples/next-prisma-sse-subscriptions/next.config.js

@@ -10,7 +10,6 @@ const config = {
   publicRuntimeConfig: {
     // Will be available on both server and client
     APP_URL: process.env.APP_URL,
-    WS_URL: process.env.WS_URL,
   },
   /** We run eslint as a separate task in CI */
   eslint: { ignoreDuringBuilds: !!process.env.CI },

examples/next-prisma-websockets-starter/package.json → examples/next-prisma-sse-subscriptions/package.json

@@ -1,32 +1,29 @@
 {
-  "name": "examples-next-websockets-starter",
+  "name": "examples-next-sse",
   "private": true,
   "engines": {
     "node": ">=18.15.0"
   },
   "scripts": {
-    "prebuild": "prisma generate && prisma migrate deploy",
-    "build:1-next": "cross-env NODE_ENV=production next build",
-    "build:2-server": "tsc --project tsconfig.server.json",
-    "build": "run-s build:*",
-    "dev:wss": "cross-env PORT=3001 tsx watch src/server/wssDevServer.ts --tsconfig tsconfig.server.json ",
-    "dev:next": "next dev",
-    "dev": "pnpm migrate-dev && run-p dev:*",
+    "build:1-prisma-generate": "prisma generate",
+    "build:2-prisma-migrate": "dotenv -c . prisma db push",
+    "build:3-next": "cross-env NODE_ENV=production next build",
+    "build": "dotenv -c . run-s build:*",
+    "dev": "next dev",
     "db-up": "docker-compose up -d",
     "db-seed": "prisma db seed",
-    "db-migrate-dev": "prisma migrate dev",
+    "dev-migrate": "dotenv -c . prisma migrate dev",
     "db-nuke": "docker-compose down --volumes --remove-orphans",
-    "dx": "run-s db-up db-migrate-dev db-seed dev",
-    "dev-nuke": "rm -rf prisma/*.db**",
+    "dx": "run-s db-up dev-migrate db-seed dev",
     "generate": "prisma generate",
     "migrate-dev": "prisma migrate dev",
     "migrate": "prisma migrate deploy",
-    "start": "cross-env NODE_ENV=production node dist/server/prodServer.js",
+    "start": "next start",
     "studio": "prisma studio",
     "lint": "eslint --cache --ext \".js,.ts,.tsx\" src",
     "lint-fix": "pnpm lint --fix",
     "test-dev": "cross-env APP_ENV=test start-server-and-test dev 3000 test",
-    "test-start": "cross-env APP_ENV=test WS_URL=ws://localhost:3000 start-server-and-test start 3000 test",
+    "test-start": "cross-env APP_ENV=test start-server-and-test start 3000 test",
     "test": "playwright test",
     "postinstall": "prisma generate"
   },
@@ -52,23 +49,20 @@
     "react-dom": "^18.3.1",
     "superjson": "^1.12.4",
     "tsx": "^4.0.0",
-    "ws": "^8.0.0",
     "zod": "^3.0.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.26.1",
     "@tanstack/react-query-devtools": "^5.0.0",
     "@types/node": "^20.10.0",
     "@types/react": "^18.3.1",
-    "@types/ws": "^8.2.0",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
     "@typescript-eslint/parser": "^7.7.0",
     "autoprefixer": "^10.4.7",
     "cross-env": "^7.0.3",
+    "dotenv-cli": "^7.3.0",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.0.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.14",
     "prettier": "^2.8.8",

examples/next-prisma-websockets-starter/prisma/schema.prisma → examples/next-prisma-sse-subscriptions/prisma/schema.prisma

@@ -3,7 +3,6 @@
 
 datasource db {
   provider = "postgres"
-  url      = env("DATABASE_URL")
   // provider = "sqlite"
   // url      = "file:./dev.db"
 }
@@ -28,3 +27,4 @@ model Post {
   createdAt DateTime @unique @default(now())
   updatedAt DateTime @unique @default(now())
 }
+

examples/next-prisma-websockets-starter/src/pages/_app.tsx → examples/next-prisma-sse-subscriptions/src/pages/_app.tsx

@@ -2,7 +2,7 @@ import '../styles/global.css';
 import type { Session } from 'next-auth';
 import { getSession, SessionProvider } from 'next-auth/react';
 import type { AppType } from 'next/app';
-import { trpc } from 'utils/trpc';
+import { trpc } from '~/utils/trpc';
 
 const MyApp: AppType<{ session: Session | null }> = ({
   Component,

examples/next-prisma-websockets-starter/src/pages/about.tsx → examples/next-prisma-sse-subscriptions/src/pages/about.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { useState } from 'react';
-import { trpc } from 'utils/trpc';
+import { trpc } from '~/utils/trpc';
 
 export default function AboutPage() {
   const [num, setNumber] = useState<number>();

examples/next-prisma-sse-subscriptions/src/pages/api/auth/[...nextauth].ts

@@ -0,0 +1,4 @@
+import NextAuth from 'next-auth';
+import { authOptions } from '~/server/authOptions';
+
+export default NextAuth(authOptions);

examples/next-prisma-websockets-starter/src/pages/api/trpc/[trpc].ts → examples/next-prisma-sse-subscriptions/src/pages/api/trpc/[trpc].ts

@@ -2,9 +2,10 @@
  * This file contains the tRPC http response handler and context creation for Next.js
  */
 import * as trpcNext from '@trpc/server/adapters/next';
-import { createContext } from 'server/context';
-import type { AppRouter } from 'server/routers/_app';
-import { appRouter } from 'server/routers/_app';
+
+import { createContext } from '~/server/context';
+import type { AppRouter } from '~/server/routers/_app';
+import { appRouter } from '~/server/routers/_app';
 
 export default trpcNext.createNextApiHandler<AppRouter>({
   router: appRouter,