blackraven666•5w 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

blackraven666OP•5w 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