trpc-uwebsockets

uWebSockets.js adapter for tRPC

Installation

Latest stable version

1yarn add trpc-uwebsockets@latest

Or install beta version with subscription support

1yarn add trpc-uwebsockets@beta

Usage

Import needed packages

1import { App } from 'uWebSockets.js';
2import { inferAsyncReturnType, initTRPC } from '@trpc/server';
3import { CreateContextOptions } from 'trpc-uwebsockets';
4import z from 'zod';

Define tRPC, context, and router

1const t = initTRPC.context<Context>().create();
2
3const createContext = ({ req, res }: CreateContextOptions) => {
4  const getUser = () => {
5    if (req.headers.authorization === 'meow') {
6      return {
7        name: 'KATT',
8      };
9    }
10    return null;
11  };
12  return {
13    req,
14    res,
15    user: getUser(),
16  };
17};
18export type Context = inferAsyncReturnType<typeof createContext>;
19
20const router = t.router({
21  hello: t.procedure
22    .input(
23      z
24        .object({
25          who: z.string().nullish(),
26        })
27        .nullish()
28    )
29    .query(({ input, ctx }) => {
30      return {
31        text: `hello ${input?.who ?? ctx.user?.name ?? 'world'}`,
32      };
33    }),
34});

Initialize uWebsockets server and attach tRPC

1const app = App();
2
3createUWebSocketsHandler(app, '/trpc', {
4  router,
5  createContext,
6});
7
8/* dont crash on unknown request */
9app.any('/*', (res) => {
10  res.writeStatus('404 NOT FOUND');
11  res.end();
12});
13
14app.listen('0.0.0.0', 8000, () => {
15  console.log('Server listening on http://localhost:8000');
16});

API

Create context options

1type CreateContextOptions = {
2  /* read-only request information */
3  req: {
4    headers: Record<string, string>;
5    method: 'POST' | 'GET';
6    query: URLSearchParams;
7    path: string;
8  };
9  /* see https://unetworking.github.io/uWebSockets.js/generated/interfaces/HttpResponse.html */
10  res: {
11    writeStatus(status: RecognizedString): HttpResponse;
12    writeHeader(key: RecognizedString, value: RecognizedString): HttpResponse;
13  };
14};

Enabling subscrptions

Simple method: enable subscriptions when creating the main handler.

1createUWebSocketsHandler(app, '/trpc', {
2  router,
3  createContext,
4  enableSubscriptions: true,
5});

Recommended method: enable subscriptions after registering main request handler.

1const app = App();
2
3createUWebSocketsHandler(app, '/trpc', {
4  router,
5  createContext: ({ req, res }) => {},
6});
7
8applyWSHandler(app, '/trpc', {
9  router,
10  createContext: ({ req, res }) => {},
11});

example of subscrption client

1import {
2  createTRPCProxyClient,
3  createWSClient,
4  httpBatchLink,
5  splitLink,
6  wsLink,
7} from '@trpc/client';
8
9const host = `localhost:8080/trpc`;
10const wsClient = createWSClient({ url: `ws://${host}` });
11const client = createTRPCProxyClient<AppRouter>({
12  links: [
13    splitLink({
14      condition(op) {
15        return op.type === 'subscription';
16      },
17      true: wsLink({ client: wsClient }),
18      false: httpBatchLink({
19        url: `http://${host}`,
20        headers: headers,
21      }),
22    }),
23  ],
24});