I have a websocket + REST project. Should I be using splitLink like this to combine WS and HTTP?

I have a backend project that uses REST for queries/mutations and Websockets for subscriptions. I just want validation: is this exactly what I should be doing? Is there some other simpler way that I'm missing? Thank you for the great project.
import { createTRPCProxyClient, httpLink, createWSClient, wsLink, splitLink } from "@trpc/client";
import type { AppRouter } from "backend/src/trpc/appRouter.trpc";
import { browser } from '$app/environment';

let instance: ReturnType<typeof createTRPCProxyClient<AppRouter>>;

export const getTrpcClient = () => {
if (!instance) {
const websocketClient = createWSClient({
url: "ws://localhost:3001",
});

instance = createTRPCProxyClient<AppRouter>({
links: [
splitLink({
condition(op) {
return op.type === 'subscription'
},
true: wsLink({
client: websocketClient
}),
false: httpLink({
url: "http://localhost:3000/trpc",
})
})
]
});
}

return instance;
}
import { createTRPCProxyClient, httpLink, createWSClient, wsLink, splitLink } from "@trpc/client";
import type { AppRouter } from "backend/src/trpc/appRouter.trpc";
import { browser } from '$app/environment';

let instance: ReturnType<typeof createTRPCProxyClient<AppRouter>>;

export const getTrpcClient = () => {
if (!instance) {
const websocketClient = createWSClient({
url: "ws://localhost:3001",
});

instance = createTRPCProxyClient<AppRouter>({
links: [
splitLink({
condition(op) {
return op.type === 'subscription'
},
true: wsLink({
client: websocketClient
}),
false: httpLink({
url: "http://localhost:3000/trpc",
})
})
]
});
}

return instance;
}
wleistra
wleistra273d ago
This is how we are doing it for our product and it seems to work well
mw
mw273d ago
Thanks @wleistra
Alex / KATT 🐱
Alex / KATT 🐱273d ago
Lgtm
mw
mw273d ago
Thanks @alexkatt
More Posts
Nested procedures are separated by dots, is there a way to change that to `/`s instead ?currently it looks something like this `/api/trpc/post.byId`, is there a way to have it like `/api/tIs there a way to split a trpc api across multiple lambdas ?How do I go about splitting my TRPC api across multiple lambdas, such that each lambda would load thCan I alter the context in a procedure?Is there a proper way to do this? Mutating the `opts.ctx` directly seems wrongtRPC & getInitialPropsSo I am not using Next new App router but cant figure it out how to call a method during SSR with geGetting 413 error in Vercel when batching several queries (using Next pages router)Hi guys, I'm having a weird error on Vercel: "LAMBDA_RUNTIME Failed to post handler success responsQueries work but mutations do notOdd bug I'm experiencing with TRPC + react-query + the koa adapter. I just set everything up per docuseContext utils getData always returning undefinedI have my app set up with TRPC and when trying to call ` const utils = trpc.useContext();` `consTRPC Error HandlingI am using TRPC as my backend for my nextjs application. The one major problem i am facing is that, CORS issue with Lambda Handler (SST)no idea what's going on with this error. been stuck on it for way too long. i tried adding the test-TRPC API not working for production buildI am using Trpc and next in project, The App is fully functional with dev build , but api's giving 4Get object type using UseTRPCQueryResultthis code ```ts type playlistOutputData = UseTRPCQueryResult< inferRouterOutputs<AppRouter>["notifNeed help with type hinting a function that accepts a trpc client router```js interface CreateModelProps<GetResult> { name: string, procedures: DecoratedProcedureReDatabase error on examples-next-prisma-starterHi, im on node 18.16.0. I'm trying to clone and use this : https://github.com/trpc/examples-next-priSet server response headers from TRPC standalone adapterHi I am trying to implement my own authentication in Trpc. For this I need to create a session on t