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
...
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