tRPC + Server-sent Events (SSE)

This example showcases the use of httpSubscriptionLink to facilitate useSubscription via Server-sent Events.

Try demo http://sse.trpc.io/

Features

• 🧙‍♂️ E2E type safety with tRPC
• ⚡ Full-stack React with TanStack Start
• ⚡ Server-Sent-Events / Subscription support
• ⚡ Database with Drizzle
• 🔐 Authorization using Auth.js

Code

This project includes 2 examples of the subscription pattern:

1. Simple example of whoIsTyping
2. A slightly more involved example of livePosts

• Hooks for both cases (using useSubscription) can be found in /src/routes/channels/-components/hooks.ts
• The EventEmitter & whoIsTyping subscription route can be found in /src/server/routers/channel.ts
• The more complex post subscription route can be found in /src/server/routers/post.ts

Route loaders start the queries a page needs with loadHandles and prefetch entries from @trpc/tanstack-react-query/unstable-handles, and return the handles. Components read them with useSuspenseQuery(fromHandle(trpc, handle)). During SSR, procedures are called in-process with localLink; the browser talks to /api/trpc over HTTP.

Setup

git clone git@github.com:trpc/examples-tanstack-start-sse-chat.git
pnpm i
cp .env.example .env
pnpm dev