How to have 2 separate trpc clients for http and websockets?

I'm trying to have a setup where I can use trpc with 2 separate clients, one for normal HTTP requests and one for websockets since most of our site pages do not need a websocket connection. I have tried to create 2 files with 2 different createTRPCNext clients, it works fine in pages that don't use useSubscription but when using it, it looks like only the first trpc client that was initialized will be used, because even if I'm using the websocket client for useSubscription, I'm getting this error TRPCClientError: Subscriptions should use wsLink
N
Nick169d ago
Have a look at our SOA example One client, many backend
FR
Fouad Raheb168d ago
Can you please share the SOA example link? I couldn't find it on the site and github, sorry Found it! https://github.com/trpc/trpc/tree/main/examples/soa It didn't help in my case with websockets I'm trying to have this example use 2 separate trpc clients, so that only some queries/mutations/subscriptions use the websocket client and the rest with the default http client https://github.com/trpc/examples-next-prisma-websockets-starter
N
Nick168d ago
Not 100% sure but isn't the splitLink exactly what you want for that? SOA uses it already I believe
FR
Fouad Raheb168d ago
I tried using splitLink and requests started going through http but a websocket connection is still starting as showing in dev tools with an empty array message []
No description
N
Nick168d ago
Hm, I think @julius might be our resident websockets and soa pro then
FR
Fouad Raheb168d ago
Seems like the only way to not have an empty websocket connection created is by creating wsLink on run time, but this would create multiple connections for each useSubscription. We just need to have a way to not start a connection if no messages are sent yet and no active useSubscription
(runtime) => {
return (ctx) => {
if (ctx.op.type === "subscription") {
return getWSLink()(runtime)(ctx);
} else {
return getBatchLink()(runtime)(ctx);
}
};
},
(runtime) => {
return (ctx) => {
if (ctx.op.type === "subscription") {
return getWSLink()(runtime)(ctx);
} else {
return getBatchLink()(runtime)(ctx);
}
};
},
J
julius168d ago
i don't think I've ever touched those the websocket parts - just been fighting our example to work with newer next versions haha
FR
Fouad Raheb168d ago
Haha good luck
More Posts
How to configure context for a standalone server?Are there any examples out there on how to set up context for a standalone server? The docs do incluDocs hard to follow with so much `next` codeNot having a great experience with the docs. There are many examples that use `next`, making it hardadding information to the QueryKey that is not part of the procedure inputwe have the situation that we have our trpc routes read some specific information from the browsesr How to make typed error responses in the context of a specific query?Each query has a typed (success) response, although it seems all queries have a shared type for the What's the negative code returned in error responses?What's the negative error code returned in errors responses and how is it meant to be used by the clTRPC File as InputHi can someone pls help me: https://stackoverflow.com/questions/77381516/nextjs-trpc-file-as-input`refetchOnWindowFocus` with RSC?Hi. Is there any way to have `refetchOnWindowFocus` work with server components? Seems like it onlyMulti useSubscription with trpc react -query integration failed to find second subusing trpc in nx monorepo, node version is 20 with yarn. backend is using trpc with express integratIs there any easy way to create a Type for a trpc routerI want to publish a set of trpc api client to npm, which will be used by my customer directly. But iTRPC with Nextjs 13 App RouterIm trying to implement TRPC with my already existing Nextjs 13 App to get typesafe API's. I've managSecurity: DDOS attack prevention for open endpoints tRPCSo we are building an application and got multiple trpc endpoints associated with it, some of them aIs there any information about caching in `@trpc/react-query`?How does query caching work? I want to create library for Angular and I would like to understand Reacache craziness?can someone sanity check something for me? i'm using sst + trpc + drizzleorm + aws + rds + postgretRPC over WebSocket with Next.js and NextAuthHi. I'm trying to set up Next 13 with tRPC over a WebSocket and NextAuth. I got it mostly working wiServer Side Calls in tRPC not working (Next 13, App Router)Where do I make the helper?Project structure ?I greatly appreciate for your insight on this, especially if you're an experienced fullstack dev: BAccess procedures with same names and same parameters, but in different routers, genericallyMy trpc structure looks something like this: ``` trpc - router1 - routerX - proc1 - rDisable trpc route cahce?```ts import { protectedProcedure, router } from "@/lib/trpc/server/trpc"; import { TRPCError } fromHow do you set headers or cookies in procedure ?Having trouble figuring out how to set headers within a procedure in Next 13.Why use unstable_httpBatchStreamLink in React server components?When using create-t3-app I noticed that they were using `unstable_httpBatchStreamLink` in their `TRP