mwinel•3mo ago

Running Websockets/Subscriptions with Fetch / Edge Runtimes Adapter

Hi, has anyone been able to use trpc websockets/subscriptions? I am having challenges setting up the ws server using Fetch / Edge Runtimes Adapter and running it either in dev or production mode. Tried to follow the docs but it does not highlight this bit. I am using Node 20> and pnpm. Here is my route handler

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { createContext } from "./context";
import { apiRouter } from "./router";

export const trpcApiRouteHandler = (req: Request) =>
  fetchRequestHandler({
    endpoint: "/api",
    req,
    router: apiRouter,
    createContext,
  });

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { createContext } from "./context";
import { apiRouter } from "./router";

export const trpcApiRouteHandler = (req: Request) =>
  fetchRequestHandler({
    endpoint: "/api",
    req,
    router: apiRouter,
    createContext,
  });

Here is my sample router module

import type {} from "@prisma/client";
import * as authProcedures from "../modules/auth/procedures";
import * as aiProcedures from "../modules/ai/procedures";
import { router } from "./base";

export const apiRouter = router({
  auth: router(authProcedures),
  ai: router(aiProcedures),
});

import type {} from "@prisma/client";
import * as authProcedures from "../modules/auth/procedures";
import * as aiProcedures from "../modules/ai/procedures";
import { router } from "./base";

export const apiRouter = router({
  auth: router(authProcedures),
  ai: router(aiProcedures),
});

And finally here is my base module

import { TRPCError, initTRPC } from "@trpc/server";
import superjson from "superjson";

const t = initTRPC.context<Context>().create({
  transformer: superjson,
});

export const router = t.router;

import { TRPCError, initTRPC } from "@trpc/server";
import superjson from "superjson";

const t = initTRPC.context<Context>().create({
  transformer: superjson,
});

export const router = t.router;

14 Replies

BeBoRE•3mo ago

The fetch adapter doesn’t support web sockets

Emmytobs•2mo ago

If that's the case, then it seems you can only use tRPC subscriptions in Next.js projects that use the pages router.

Emmytobs•2mo ago

Using Next.js v.14 with the app router, I found that I could only get tRPC to work using the fetchRequestHandler function from the fetch adapter. All code snippets from the docs that explain using Next with tRPC seem to be based on the pages router. Except there's another way - which I can't find in the docs - of setting up tRPC in a Next.js project that uses the app router, it seems I'd have to use the pages router if I want to use tRPC subscriptions.

BeBoRE•2mo ago

The fetch adapter doesn't support subscriptions either as far as I know? What link are you using for your client?

Emmytobs•2mo ago

I'm using the client from the @trpc/react-query library

BeBoRE•2mo ago

I understand, but when you use trpc.createClient what link do you use to your server? Because I am pretty sure I could not get subscriptions working that way.

Emmytobs•2mo ago

Here's what I'm doing.

Emmytobs•2mo ago

The websocketClient is defined and exported from another file.

Emmytobs•2mo ago

The websocker server is set up this way, but I don't get any of the logs in my server terminal

BeBoRE•2mo ago

Oh you just have a separate server running for your subscriptions, you made it sound like you were doing subscriptions with the fetchHandler

Emmytobs•2mo ago

Oh yeah, I have a separate server for websockets set up. I basically followed the same setup in the example here: https://github.com/trpc/examples-next-prisma-websockets-starter/blob/daf54ca6576f3e290aa4f36dc7d0ff1eb718b716/src/server/wssDevServer.ts.

Emmytobs•2mo ago

I don't get any of the logs on the server, but I get these errors on the browser console

Emmytobs•2mo ago

Though, that example uses Next.js' pages router, so I had to change the code in the /trpc/[trpc] api route to look like the screenshot in my earlier message - that only seemed to work with Next.js app router.

BeBoRE•3w ago

@Emmytobs you an now do subscriptions over http with SSE using the httpSubscriptionLink

HTTP Subscription Link | tRPC

httpSubscriptionLink is a terminating link that's uses Server-sent Events (SSE) for subscriptions.