blackraven666
blackraven6665w ago

Next15 (app router) + ReactQuery, tRPC multiple backends

Hi, I need to use multiple trpc microservices connected to single NextJs15 App. Everything works fine with single trpc reactClient, but multiple trpc React Query clients overlaps and use URL of 'bottom' trpc provider. Am I wrong with this code? Sample code // _providers/trpc-provider.tsx export const trpc = { "backend_1": createTRPCReact<Backend_1Router>({ "abortOnUnmount": true }), "backend_2": createTRPCReact<Backend_2Router>({ "abortOnUnmount": true }) }; let clientQueryClientSingleton: QueryClient; function getQueryClient () { if (typeof window === 'undefined') { // Server: always make a new query client return makeQueryClient(); } // Browser: use singleton pattern to keep the same query client return clientQueryClientSingleton ??= makeQueryClient(); } export function TRPCProvider (props: Readonly<{ "children": React.ReactNode }>) { const queryClient = getQueryClient(); const [ trpcBackend_1_Client ] = useState(() => trpc.backend_1.createClient({ "links": [ httpBatchLink({ "url": 'http://localhost:3001/trpc' }) ] })); const [ trpcBackend_2_Client ] = useState(() => trpc.backend_2.createClient({ "links": [ httpBatchLink({ "url": 'http://localhost:3002/trpc' }) ] })); return <trpc.backend_1.Provider client={trpcBackend_1_Client} queryClient={queryClient}> {/*'http://localhost:3001/trpc' */} <trpc.backend_2.Provider client={trpcBackend_2_Client} queryClient={queryClient}> {/*'http://localhost:3002/trpc' */} <QueryClientProvider client={queryClient}> {props.children} {/* All child components will useQuery using 'http://localhost:3002/trpc' */} {/* trpc.backend_1.foo.useQuery -> 'http://localhost:3002/trpc/foo' = NOT OK */} {/* trpc.backend_2.bar.useQuery -> 'http://localhost:3002/trpc/bar' = OK */} </QueryClientProvider> </trpc.backend_2.Provider> </trpc.backend_1.Provider>; } ...
1 Reply
blackraven666
blackraven666OP5w ago
... prefetch from hydrationHelpers for both backend_1 & _2 works as expected project uses pnpm monorepo(workspace) with shared trpc routers package, tried to use separate router package per backend app - same problem Also tried to use separate providers per backend node: v20.18.0 pnpm: 9.7.0 catalog: '@trpc/server': next '@trpc/client': next '@trpc/react-query': next '@trpc/next': next react: 19.0.0-rc-69d4b800-20241021 react-dom: 19.0.0-rc-69d4b800-20241021 typescript: ^5 next: 15.0.1