anton.johansson•2y ago

Using both tRPC React client AND tRPC React Query client

Hey all! We are successfully using both the React client and the React Query client. We do this because we have differnet use cases for the two strategies. However, we've just started using WebSockets (for tRPC subscriptions), and it seems to be difficult to share the actual tRPC client between the two strategies. So with WebSockets, it always seem to create two WebSocket connections. We use this for raw React client:

import {createTRPCProxyClient} from "@trpc/client";
import type {ApplicationRouter} from "~/server/routes";
const client = createTRPCProxyClient<ApplicationRouter>(options);

import {createTRPCProxyClient} from "@trpc/client";
import type {ApplicationRouter} from "~/server/routes";
const client = createTRPCProxyClient<ApplicationRouter>(options);

We use this for the React Query client:

import {createTRPCReact} from "@trpc/react-query";
import type {ApplicationRouter} from "~/server/routes";
export const trpc = createTRPCReact<ApplicationRouter>(); // Exported directly for React Query usages
...
const client = trpc.createClient(options);

import {createTRPCReact} from "@trpc/react-query";
import type {ApplicationRouter} from "~/server/routes";
export const trpc = createTRPCReact<ApplicationRouter>(); // Exported directly for React Query usages
...
const client = trpc.createClient(options);

So both of these accepts options. Is there a way to centrally create the client and pass that in to both strategies? Thanks in advance! PS: Missing a discussion tag for @trpc/react-query.

1 Reply

MBrimmer•2y ago

@anton.johansson How did you add WebSockets to createTRPCReact. I haven't been able to get it working?