TkDodo 🔮 Posts

TkDodo 🔮

•Created by TkDodo 🔮 on 10/31/2023 in #❓-help

adding information to the QueryKey that is not part of the procedure input

we have the situation that we have our trpc routes read some specific information from the browsesr url. In our case, it's the ID of the workspace the user is currently on. We use that information on the server to send API requests to other services. Now we'd want to automatically add this information to the cache key, because the same route should return different information for different workspace IDs, and since users can switch workspaces, showing stale data from an old workspace is not good. What we can do right now is add the workspaceId as a required input to each route, read it on the frontend with a custom hook and provide it as input. That works but is a bit cumbersome: We know that the url will always contain the id, and we know how to read from it on the server. So is there a way to centrally add that information to the cache key? My idea was to maybe create a custom header that we add centrally, but as far as I can see, custom headers are also not added to the queryKey... Maybe I'm missing some kind of middleware on the client to add something to the key?

6 replies

TtRPC

•Created by TkDodo 🔮 on 9/27/2023 in #❓-help

TRPCError that has TRPCError as cause

Having some troubles with error handling, specifically, my errors are double-wrapped in a TRPCError. What I'm doing is basically having a mutation that does:

something: t.procedure
  .input(mySchema)
  .mutation() => Promise.reject(new Error('oh no'))),

something: t.procedure
  .input(mySchema)
  .mutation() => Promise.reject(new Error('oh no'))),

and then, the onError handler has:

onError({ error }) {
  console.log('onError', error.name, error.cause.name)
},

onError({ error }) {
  console.log('onError', error.name, error.cause.name)
},

which logs: onError TRPCError TRPCError. If I then go further with error.cause.cause.name, I can see my error. I already tried to reproduce this in isolation, but in a sandbox, I get: onError TRPCError Error, which is what I would expect. Just wanted to know if anyone has seen something similar; Not sure how this can happen ... thanks

6 replies

TtRPC

•Created by TkDodo 🔮 on 11/15/2022 in #❓-help

clear cookie onError

I'd like to clear a cookie (in nextjs) when a 403 error happens. I've been looking at the global error handling: https://trpc.io/docs/error-handling#handling-errors and this looks like the right place, except that I don't have access to the response , which would be needed to clear a cookie. Is there a better place to do this, or is there a reason there is no access to the res ?

6 replies

TtRPC

•Created by TkDodo 🔮 on 10/19/2022 in #❓-help

calling trpc endpoints from vanilla nextJs api routes

I'm struggling to find what's the best way to call a trpc endpoint directly from the server. Basically, I have a nextjs api endpoint where I want to call another endpoin that lives in trpc. would I need to create a trpcProxyClient? If so, would it have access to the context?

26 replies

TtRPC

•Created by TkDodo 🔮 on 10/7/2022 in #❓-help

Sharing schemas between server and client

In a typical nextJs setup, what is the idiomatic way to share zod schemas between frontend and backend? Suppose the following use-case: we have a mutation that takes an input:

const schema = z.object({
    email: z.string().email({ message: 'Enter a valid email address' }),
    subject: z.string()
    message: z.string()
})

const schema = z.object({
    email: z.string().email({ message: 'Enter a valid email address' }),
    subject: z.string()
    message: z.string()
})

on the frontend, we are building a form with react-hook-form that would also like to use this schema to validate the user input. The main question is: Where would we put this schema so that we can use it in both places. In terms of colocation, I think I would like to have it somewhere close on the server and then maybe just import it on the client from there? How are you all handling this? Thanks 🙏

8 replies

TtRPC

•Created by TkDodo 🔮 on 9/16/2022 in #❓-help

Error handling

We have some trpc routers that make requests to another api - we use axios for that. I'd like to forward these errors to the frontend, so if that api errors with 401, that's what I'd like to see in the browser. If I just await the request and don't catch the errors, I get a 500 error where the message is the message from the axios request. What would be the best way to handle this, globally? I wouldn't really want to wrap each api in a try / catch, and I'd also ideally not need to translate those errors to TRPCErrors...

18 replies