Multi useSubscription with trpc react -query integration failed to find second sub
using trpc in nx monorepo, node version is 20 with yarn.
backend is using trpc with express integration (both http and ws);
this is the react-query trpc integration:
import type { AppRouter } from '@home-web-bff';
import { createTRPCReact } from '@trpc/react-query';
export const trpc = createTRPCReact<AppRouter>();
I setup 2 subscription in the backend.
one is called randomNumber and the second is anotherRandomNumber.
the implantation is the same, return random number every 0.5 sec.
the websocket connect locally, the first sub connect but the second one return an error:
{
"id": 1,
"error": {
"message": "No "subscription"-procedure on path "anotherRandomNumber"",
"code": -32004,
"data": {
"code": "NOT_FOUND",
"httpStatus": 404,
"stack": "TRPCError: No "subscription"-procedure on path "anotherRandomNumber"\n at Object.callProcedure (/Users/tomer.levy/TipaltiHome/node_modules/@trpc/server/dist/config-3ab6b85e.js:177:15)\n at handleRequest (/Users/tomer.levy/TipaltiHome/node_modules/@trpc/server/dist/adapters/ws.js:110:45)\n at processTicksAndRejections (node:internal/process/task_queues:95:5)\n at async Promise.all (index 0)\n at WebSocket.<anonymous> (/Users/tomer.levy/TipaltiHome/node_modules/@trpc/server/dist/adapters/ws.js:239:17)",
"path": "anotherRandomNumber"
}
}
}
even though both subs are defined in the same root level router. everything is complied and also react code recognized both subs .
another code in App.tsx:
const [queryClient] = useState(() => new QueryClient());
const [trpcClient] = useState(() =>
trpc.createClient({
links: [
splitLink({
condition(op) {
return op.type === 'subscription';
},
true: wsLink({
client: wsClient,
}),
false: httpLink({
url: 'http://localhost:5003/api/trpc',
}),
}),
],
}
backend is using trpc with express integration (both http and ws);
this is the react-query trpc integration:
import type { AppRouter } from '@home-web-bff';
import { createTRPCReact } from '@trpc/react-query';
export const trpc = createTRPCReact<AppRouter>();
I setup 2 subscription in the backend.
one is called randomNumber and the second is anotherRandomNumber.
the implantation is the same, return random number every 0.5 sec.
the websocket connect locally, the first sub connect but the second one return an error:
{
"id": 1,
"error": {
"message": "No "subscription"-procedure on path "anotherRandomNumber"",
"code": -32004,
"data": {
"code": "NOT_FOUND",
"httpStatus": 404,
"stack": "TRPCError: No "subscription"-procedure on path "anotherRandomNumber"\n at Object.callProcedure (/Users/tomer.levy/TipaltiHome/node_modules/@trpc/server/dist/config-3ab6b85e.js:177:15)\n at handleRequest (/Users/tomer.levy/TipaltiHome/node_modules/@trpc/server/dist/adapters/ws.js:110:45)\n at processTicksAndRejections (node:internal/process/task_queues:95:5)\n at async Promise.all (index 0)\n at WebSocket.<anonymous> (/Users/tomer.levy/TipaltiHome/node_modules/@trpc/server/dist/adapters/ws.js:239:17)",
"path": "anotherRandomNumber"
}
}
}
even though both subs are defined in the same root level router. everything is complied and also react code recognized both subs .
another code in App.tsx:
const [queryClient] = useState(() => new QueryClient());
const [trpcClient] = useState(() =>
trpc.createClient({
links: [
splitLink({
condition(op) {
return op.type === 'subscription';
},
true: wsLink({
client: wsClient,
}),
false: httpLink({
url: 'http://localhost:5003/api/trpc',
}),
}),
],
}
