❓-help

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

FRFouad Raheb

10/31/2023

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

Nnlucas

11/1/2023

Have a look at our SOA example One client, many backend

FRFouad Raheb

11/1/2023

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

Nnlucas

11/1/2023

Not 100% sure but isn't the splitLink exactly what you want for that? SOA uses it already I believe

FRFouad Raheb

11/1/2023

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 []

Nnlucas

11/1/2023

Hm, I think @julius might be our resident websockets and soa pro then

FRFouad Raheb

11/2/2023

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);
            }
          };
        },

Jjulius

11/2/2023

i don't think I've ever touched those the websocket parts - just been fighting our example to work with newer next versions haha

FRFouad Raheb

11/2/2023

Haha good luck

Looking for more? Join the community!

❓-help

❓-help

Recommended 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 inclu Docs hard to follow with so much `next` codeNot having a great experience with the docs. There are many examples that use `next`, making it hard adding 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 cl TRPC 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 only Multi 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 integrat Is 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 i TRPC with Nextjs 13 App RouterIm trying to implement TRPC with my already existing Nextjs 13 App to get typesafe API's. I've manag Security: DDOS attack prevention for open endpoints tRPCSo we are building an application and got multiple trpc endpoints associated with it, some of them a Is 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 Rea cache craziness?can someone sanity check something for me? i'm using sst + trpc + drizzleorm + aws + rds + postgre tRPC 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 wi Server 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: B Access procedures with same names and same parameters, but in different routers, genericallyMy trpc structure looks something like this: ``` trpc - router1 - routerX - proc1 - r Disable trpc route cahce?```ts import { protectedProcedure, router } from "@/lib/trpc/server/trpc"; import { TRPCError } from How 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