trpc-sse-link's Introduction

tRPC x Server-sent-events (SSE)

Supports sending tRPC's subscriptions over SSE.

Note: This is a proof-of-concept and not intended to be used directly.

Components

httpSseLink: Client-side tRPC link bridging SSE HTTP connections to the tRPC API
Server ~~hack~~ shim: Server-side logic converting subscription procedures to events in a SSE HTTP connection
tRPC link split: Client-side configuration sending subscription procedures through httpSseLink

These then underly usage:

export const numbers = t.procedure
  .input(
    zod.object({
      count: zod.number(),
    })
  )
  .subscription(async ({ input }) => {
    return observable<{ id: string; idk: number }>((sub) => {
      let i = 0;
      setInterval(() => {
        if (i++ === input.count) {
          sub.complete();
        } else {
          sub.next({
            id: randomUUID(),
            idk: Math.round(Math.random() * 5000),
          });
        }
      }, 1000);
    });
  });

Client subscription consumer

const [messages, setMessages] = useState<Array<{ id: string; idk: number }>>(
  []
);

trpcClient.numbers.useSubscription(
  {
    max: 25,
  },
  {
    enabled: true,
    onData(data) {
      setMessages((prev) => [...prev, data]);
    },
  }
);

return (
  <div>
    {messages.map((m) => (
      <span key={m.id}>{m.idk}</span>
    ))}
  </div>
);

Issues

Subscription continues if client closes the connection early
- I thought this was covered by the server-side request/response event handlers but that seems to be a misunderstanding. See #2.

For the visual people

recording.mp4

trpc-sse-link's People

Contributors

Stargazers

Watchers

trpc-sse-link's Issues

Is this still the way to go?

I've notice that the tRPC supports web sockets now, however i don't see any SSE support. Seems like this last update was 10 months ago, but may i ask if this way is still valid?

Thanks!