blackraven666 Posts

blackraven666

•Created by blackraven666 on 11/6/2024 in #❓-help

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>;
}

...

2 replies