TkDodo 🔮
tRPC with with react-query prefetching in Next.js app directory.
We have an excellent new guide in the v5 docs: https://tanstack.com/query/v5/docs/react/guides/ssr
7 replies
adding information to the QueryKey that is not part of the procedure input
thanks for your insights, greatly appreciated 🙏
I just brought this topic up in our architecture meeting and we agreed that explicitly passing it as input is the best way, so we'll do that.
6 replies
Cancel useQueries with single function
the
cancel method you get back from trpc utils is the same as queryClient.cancelQueries:
https://trpc.io/docs/client/react/useUtils#helpers5 replies
Type safety with enabled option
not if enabled is
type boolean and that changes at runtime. Like !!userId is not something that can be evaluated at compile time.
also, even if possible, it would be wrong, because enabled can be bypassed by calling refetch() returned from useQuery. So TypeScript is correct - it is potentially undefined 🙂19 replies
clear cookie onError
I added a function to remove the cookies into the ctx - that works. Haven't looked at middlewares - the logging example shows how I can await the result and then act on it. I'll try if this also works for errors. Not sure if I'd have to try/catch the
const result = await next()6 replies
calling trpc endpoints from vanilla nextJs api routes
getHTTPStatusCodeFromError would be sweet, I have now made my own mapping according to this table:
https://trpc.io/docs/v9/error-handling#error-codes26 replies
calling trpc endpoints from vanilla nextJs api routes
related follow-up question @julius :
when I make a server-side call, and it errors (e.g. because of a zod validation error), I get a
TRPCError. That has a code, which is a string and it says BAD_REQUEST. Is there a way to translate this to a proper status code like 400 in this case? Right now, all these errors are sent as 500 errors to the frontend and this is kinda suboptimal imo. Thanks 🙏26 replies
calling trpc endpoints from vanilla nextJs api routes
oh, would I want something like this?
https://github.com/trpc/trpc/issues/1724
appRouter.createCaller ?26 replies