mwinel
mwinel2mo 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;
13 Replies
BeBoRE
BeBoRE2mo ago
The fetch adapter doesn’t support web sockets
Emmytobs
Emmytobs4w 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
Emmytobs4w 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
BeBoRE4w ago
The fetch adapter doesn't support subscriptions either as far as I know? What link are you using for your client?
Emmytobs
Emmytobs4w ago
I'm using the client from the @trpc/react-query library
No description
BeBoRE
BeBoRE4w 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
Emmytobs4w ago
Here's what I'm doing.
No description
Emmytobs
Emmytobs4w ago
The websocketClient is defined and exported from another file.
No description
Emmytobs
Emmytobs4w 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
BeBoRE4w 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
Emmytobs4w 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
Emmytobs4w ago
I don't get any of the logs on the server, but I get these errors on the browser console
No description
Emmytobs
Emmytobs4w 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.
More Posts
TRPClientError: Unexpected characterHello, I am working on an Expo app and I seemingly randomly get the error in the picture. I don't reChange db url in ctx with an API callI want to have a switch in my frontend to change from dev db to prod db. I'm using prisma. Have 2 prTRPC Docs GenerationHey, I want to generate a swagger-like interface to document my TRPC api. However, I don't want to uerror: NEXT_REDIRECTHi I'm doing a server call in RSC, but it crash the app and show this kind of error where shows in tIs there a way to use TRPC React Query Integration with Nanostores instead of the Context API?Currently we use TRPC by wrapping out application in a TRPC context provider. However, in some use cWhat do you guys think about the approach of importing/exporting tRPC types to be used in separate BHello, I was looking for a way to share tRPC API between multiple electron apps, I thought first abHow to add fallback link to tRPC link (Mirror API URL if main URL failed)My API URL is not functioning in Iran, I'm using Vercel and Vercel has banned Iran, I want to providHow can I show real-time post's replies/comments after a successful a reply mutation?After submitting a successful reply mutation, I want to show a real-time UI update on my frontend?Quick question: how to get mutation body in a middleware, which is for a global logging?Hi everyone!Quick question: The pic shows that the output of "input" is undefined. Is there any anotError with v11 when using batchingI'm using the lastest version of v11. When I use the batch link I get an trpc inernal error when bat