mwinel
mwinel8mo 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
BeBoRE8mo ago
The fetch adapter doesn’t support web sockets
Emmytobs
Emmytobs7mo 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
Emmytobs7mo 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.
No description
No description
BeBoRE
BeBoRE7mo ago
The fetch adapter doesn't support subscriptions either as far as I know? What link are you using for your client?
Emmytobs
Emmytobs7mo ago
I'm using the client from the @trpc/react-query library
No description
BeBoRE
BeBoRE7mo 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
Emmytobs7mo ago
Here's what I'm doing.
No description
Emmytobs
Emmytobs7mo ago
The websocketClient is defined and exported from another file.
No description
Emmytobs
Emmytobs7mo ago
The websocker server is set up this way, but I don't get any of the logs in my server terminal
No description
BeBoRE
BeBoRE7mo 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
Emmytobs7mo 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
Emmytobs7mo ago
I don't get any of the logs on the server, but I get these errors on the browser console
No description
Emmytobs
Emmytobs7mo 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
BeBoRE6mo 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.