How to use multiple routers with different URLs in a single client-side app?

[sanntann]

I'm excited about the new features introduced in #3049, but I'm encountering issues when trying to implement them in my setup. I'm using multiple routers, each hosted on separate AWS Lambda functions, and have structured my client-side to use nested Providers, specifically the single ApiProviders uses both AuthApiProvider and PublicApiProvider.

Here's the problem: depending on the nesting order, either the inner or the outer provider works, but not both. The error message I receive on the client side is:

TRPCClientError: No "query"-procedure on path "test"

where test is the route on trpcPublicApi. This issue persists regardless of which provider is nested inside the other.

Below is my client-side setup for context:

import { AuthApiProvider } from '@/utils/AuthApiProvider';
import { PublicApiProvider } from '@/utils/PublicApiProvider';

export const ApiProviders = ({ children }) => {
  return (
    <AuthApiProvider>
      <PublicApiProvider>{children}</PublicApiProvider>
    </AuthApiProvider>
  );
};

The Providers are identical, except for the url and router type used (AuthApiRouter or PublicApiRouter).

// @utils/AuthApiProvider
import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpBatchLink } from '@trpc/client';
import { createTRPCReact } from '@trpc/react-query';
import { AuthApiRouter } from '@server/index';

const queryClient = new QueryClient();

export const trpcAuthApi = createTRPCReact<AuthApiRouter>();

const trpcClient = trpcAuthApi.createClient({
  links: [
    httpBatchLink({
      url: 'http://127.0.0.1:3000/auth/',
      // You can pass any HTTP headers you wish here
      async headers() {
        return {};
      },
    }),
  ],
});

export const AuthApiProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  return (
    <trpcAuthApi.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpcAuthApi.Provider>
  );
};

// @utils/PublicApiProvider
import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpBatchLink } from '@trpc/client';
import { createTRPCReact } from '@trpc/react-query';
import { PublicApiRouter } from '@server/index';

const queryClient = new QueryClient();

export const trpcPublicApi = createTRPCReact<PublicApiRouter>();

const trpcClient = trpcPublicApi.createClient({
  links: [
    httpBatchLink({
      url: 'http://127.0.0.1:3000/public/',
      // You can pass any HTTP headers you wish here
      async headers() {
        return {};
      },
    }),
  ],
});

export const PublicApiProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  return (
    <trpcPublicApi.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpcPublicApi.Provider>
  );
};