anton.johansson Posts

anton.johansson

•Created by anton.johansson on 6/13/2023 in #❓-help

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.

2 replies

TtRPC

•Created by anton.johansson on 4/20/2023 in #❓-help

Next.js + tRPC, multitenancy, access Next.js Router when setting tRPC headers

Hey all! I'm writing a multi-tenant solution. Most Next.js pages lie under the /pages/[tenantKey]/ path. The tenantKey describes which tenant we are working with at the moment. I'm messing around with Next.js + tRPC, and I would love to be able to access the Next.js Router (to access the tenantKey) in a generic way when accessing the tRPC client. Using the tenantKey in the path, I could automatically send a header, X-Tenant-Key, that the server side of tRPC could look at when generating the appropriate context. I'm thinking some React hook or something for this:

const useTRPC = () => {
    const {query} = useRouter();
    const tenantKey = {query};
    // somehow create trpc client with the header `X-Tenant-Key: tenantKey`
    return trpc;
}

const useTRPC = () => {
    const {query} = useRouter();
    const tenantKey = {query};
    // somehow create trpc client with the header `X-Tenant-Key: tenantKey`
    return trpc;
}

I also want to combine this with React Query of course, so I can properly get the useQuery(...) features. Using it would be like this:

const trpc = useTRPC();
const result = trpc.myNamespace.myProcedure.useQuery("my-input-parameter");

const trpc = useTRPC();
const result = trpc.myNamespace.myProcedure.useQuery("my-input-parameter");

Does anyone have any pointers? Is this possible to achieve without re-creating the @trpc/next library from scratch? 😄

3 replies

TtRPC

•Created by anton.johansson on 4/3/2023 in #❓-help

Custom error management

Hey peeps! I could've sworn I created a GitHub issue about this, but I must've been dreaming, because I cannot find it. Anyway, it's support-related, so I figured it's better to ask here! I have a large application that has a traditional client/server API and I use Axios to make calls to the server. Now, I'm investigating replacing that with tRPC (because it feels like an amazing developer experience and will quicken development). I have a rather "sophisticated" error management in the application. I have my own custom ApplicationError, which has an errorCode and a custom data object with additional information about the error. Any server-side code in the application can throw this error. A middleware catches this and converts it to a 400 Bad Request with an appropriate JSON response body. In the client, I also have my custom wrapper on top of Axios, that simply catches 400 Bad Request, and converts the JSON back to an ApplicationError and simply throws it. This means that I can easily catch ApplicationError in my client side code, just as if it was originally thrown on the client. Now, I want to do something similar with tRPC. I see that we have the TRPCError, but I would love to be able to utilize my ApplicationError. For two reasons: 1. I don't want to re-write all my code. 2. I think it's a nice abstract layer that the majority of my server side code do not need to be aware of "tRPC". Does anyone have any ideas on how I can achieve this? I would need some kind of middleware on top of the tRPC procedure that catches my error and converts it into a TRPCError. I would also need some kind of filter in my tRPC client code that automatically converts this back into an ApplicationError and throws it. Any help or suggestions are appreciated! Thanks in advance.

26 replies