T
tRPC

Using both tRPC React client AND tRPC React Query client

Using both tRPC React client AND tRPC React Query client

Aanton.johansson
View on Discord
6/13/2023
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.
MMBrimmer
View on Discord
6/28/2023
@anton.johansson How did you add WebSockets to createTRPCReact. I haven't been able to get it working?

Looking for more? Join the community!

T
tRPC

Using both tRPC React client AND tRPC React Query client

Join Server
Recommended Posts
TRPCClientErrorlike no name propertyQuick question: Why doesn't TRPCClientErrorLike have the name property? It is called ErrorLike, so IapplyWSSHandler yells at context error in expressI used the example code from docs. My applyWSSHandler code is: ``` const handler = applyWSSHandler({How to use the errorFormatter when using an adapter?The example here uses `context.create()`, which isn't something you do when using an adapter. I donOne file per function call on the server sideI'd like to structure my server with one file per function call -- is this an antipattern? If not, d