Incorrect data is returned when using multiple clients

[BrendanC23]

There is a race condition that causes incorrect data to be returned if there are two different clients. I have two different TRPC clients. The first is a regular client.

function App() {
    const [queryClient] = useState(() => new QueryClient());
    const trpcClient = trpc.createClient({
        links: [loggerLink(), ipcLink()],
        transformer: superjson,
    });

    return (
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
            <QueryClientProvider client={queryClient}>
            </QueryClientProvider>
        </trpc.Provider>
    );
}

The second is a proxy client.

export const trpc = createTRPCReact<AppRouter>();

export const trpcProxyClient = createTRPCProxyClient<AppRouter>({
    links: [loggerLink(), ipcLink()],
    transformer: superjson,
});

I can use the regular client in components, doing things like const result = trpc.path.getData.useQuery(). The proxy client is used in TanStack Router route loaders, as it can be awaited.

export const Route = createRootRouteWithContext<RouterContext>()({
    loader: async ({ context }) => {
        const data = await context.trpcProxyClient.path.getData.query();
        return data;
    },
    component: RootComponent,
});

This causes an issue because the two TRPC clients cause there to be two instances of onMessage.

electron-trpc/packages/electron-trpc/src/renderer/ipcLink.ts

Lines 44 to 46 in a386c98

	this.#electronTRPC.onMessage((response: TRPCResponseMessage) => {
	this.#handleResponse(response);
	});

Each electron-trpc client will have a separate request Operation id.

https://github.com/trpc/trpc/blob/48de686d22ccbefe1cf97eaa7f205dabe7302d2a/packages/client/src/internals/TRPCUntypedClient.ts#L79-L88

Thus, it is possible for the wrong data to be returned in some circumstances. Consider the following:

1. trpcClient (client 1) is created. It's requestId = 0. An onMessage handler is added.
2. trpcProxyClient (client 2) is created. It's requestId = 0. An onMessage handler is added.
3. trpcClient fetches data using requestId = 1.
4. trpcProxyClient fetches data using requestId = 1.
5. trpcClient's request completes. Both trpcClient and trpcProxyClient have their onMessage callback trigger with id = 1.
6. trpcClient fullfils the request with the correct data.
7. trpcProxyClient's onMessage was called with id = 1, and so it returns incorrect data back to the caller.
8. trpcProxyClient's request finishes, but #handleResponse has already been run on incorrect data. The correct response is discarded.

[Ryanjso]

Did you ever find a solution for this? I'm in the same boat - trying to use a proxy in the tanstack router beforeLoad

[BrendanC23]

I ended up writing a patch that adds a random clientId field to IPCClient to determine which client a request came from. When the client receives a response from the main process, it checks whether the response is associated with it's id.

electron-trpc/packages/electron-trpc/src/renderer/ipcLink.ts

Line 51 in 9b533d2

const request = response.id && this.#pendingRequests.get(response.id);

#clientId = crypto.randomUUID();
const request = response.id && clientId === this.#clientId && this.#pendingRequests.get(response.id);
this.#electronTRPC.sendMessage({ method: 'request', operation: op, clientId: this.#clientId });

Then, there's some changes in the main process to send the client ID back with the response.

electron-trpc/packages/electron-trpc/src/types.ts

Lines 4 to 11 in 9b533d2

	export type ETRPCRequest =
	| { method: 'request'; operation: Operation }
	| { method: 'subscription.stop'; id: number };
	export interface RendererGlobalElectronTRPC {
	sendMessage: (args: ETRPCRequest) => void;
	onMessage: (callback: (args: TRPCResponseMessage) => void) => void;
	}

| { method: 'request'; operation: Operation, clientId: string }
| { method: 'subscription.stop'; id: number, clientId: string };

onMessage: (callback: (args: TRPCResponseMessage, clientId: string) => void) => void;

I'll try and write a complete PR soon.

[Ryanjso]

I switched to oRPC and it works like a breeze!