tRPC

T

tRPC

Move Fast & Break Nothing. End-to-end typesafe APIs made easy.

Join

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: ```...

How do you make use of custom input validation?

I have an input validation middleware, to parse my input based on some values in ctx. ``` export function contextInputValidation( callback: (options: { ctx: Context }) => zod.Schema, ) {...

Why useQuery() tries to refetch when error occurs while useMutation() doesn't?

I'm using the T3 stack.
test: publicProcedure.input(z.string().min(5)).query(async () => {
return "hi!";
}),
test: publicProcedure.input(z.string().min(5)).query(async () => {
return "hi!";
}),
const { error } = api.user.test.useQuery("test");
const { error } = api.user.test.useQuery("test");
...
Solution:
This is a feature of react query, you'll find retry details in their docs

In a monorepo can I have 2 packages each one with different trpc server, and use both in 1 app?

I want to create 2 different APIs, and in my monorepo I have several apps, in some I want to use both, in others only 1 Thanks...

How to type a helper function to standardise loading and error states with a useQuery call?

I am trying to standardize handling of error and loading states. I'd like to have one function/component that can handle what to do in those cases, and otherwise passes data to a function to render whatever is the happy path. So something like this: ```ts...
Solution:
In case it helps anyone, this seems to work ```ts export function RenderQuery< T extends QueryLike,...

TypeScript Issue: router.createCaller Implicitly has Return Type "any"

Hello everyone, I'm currently working on a project using tRPC and Prisma. However, I've run into an issue with TypeScript when I return the return value of a mutation within another mutation of the same router. Here's the relevant code snippet: `import { UpdateProfile } from "@acme/validation/user";...

Suspend subscriptions when app is in background

When using React Native, subscriptions stay open even when the app is in the background. While this could be good for some applications, in my use case there is no need to keep the app up to date when in the background. Using the query client you can make React Query not refetch data using the focusManager's setFocused. Is there a way of telling all subscriptions to end when the app loses focus? ```ts function onAppStateChange(status: AppStateStatus) {...

Callbacks in Consecutive Mutations

I seem to be running into this issue https://tanstack.com/query/v4/docs/react/guides/mutations#consecutive-mutations using .useMutation and only the last callback is fired Is there any way around this with TRPC since I assume it's actually a wrapper around mutate instead of .useMutation?...
No description

return type of a query endpoint

Hello I currently have a trpc endpoint: ```ts const customInstances = api.customInstance.userCustomInstances.useQuery();...
No description

Troubleshooting 'Type Instantiation Is Excessively Deep' Error in Next.js Project with TRPC Integrat

I am using the table and pagination for listing data, just as the awesome developer did in 'https://github.com/PoffM/nextjs-issue-tracker.' Everything was working perfectly. I upgraded all packages, including the trpc code, but after the update, I started getting an error. I applied the same code in version 10, but I'm encountering this specific error at the 'PathValue' for the type 'GetProcedure<TRouteKey extends RouteKey>': 'type instantiation is excessively deep and possibly infinite.' //file src/utils/trpc.ts ...

procedure.input(z.object) is inferred as a partial (optional fields)?

Have a strange case of my input types coming through as partial in procedures, cannot replicate in trpc.io sandbox, any ideas why this might be happening? If I make it a simple input(z.string()) it is of type string, but z.object() properties come through as optional:
Solution:
Found the answer, this is an issue with tsconfig missing strict: true. Mine was set to strict, but apparently my nx integrated repo was not parsing the chain of extended configs correctly, so this small issue was just a symptom of a larger one. Zod just validated my environment 🤔
No description

How to trigger revalidate after server action on a client component

https://github.com/trpc/examples-next-app-dir/blob/main/src/app/server-action/ReactHookFormExample.tsx Following this experimental example I am wondering how to trigger the revalidate on the client side after the server action is complete?...

trpc openapi api memory problem

Hi Everyone, I am facing memory issues with trpc-openapi. I have a full-stack app in NextJS using TRPC. When I visit the /openapi route to visit the swagger documentation the server memory limit is reached and the server crashes. Please see attached images. Can someone please help me out with this? Thanks!...

Context being destroyed in mutator

Im currently building an app using the t3 stack + clerk for auth I have an operation which relies on a user's id being passed in my trpc backend, which on other routers was being passed fine through the context object Specifically within this router and this mutator method, I am getting the values from context up until my prisma method is called (I think) and then they disappear. The mutator method is getting the context value, as I console.logged it before hitting this specfic api route ...
Solution:
Solution: pass uid in from frontend using custom hook

Optimizing Data Refresh with trpc in React/Nextjs? Is there a more efficient way?

I'm working on a Nextjs project using trpc, and I've noticed that I'm repeating the same code for data refetching after mutations (add, update, delete) using trpc mutations. Is there a more efficient or DRY (Don't Repeat Yourself) approach to handle data refreshing after mutations with trpc in React? I'd appreciate any suggestions or best practices to optimize this process. ```ts const addTask = trpcClient.tasks.addTask.useMutation({ onSettled: () => {...

cors

Hi! Some problems with cors maybe you can help,
readingbee.se/:1 Access to fetch at 'https://server-z4fnqa7szq-oa.a.run.app/api/trpc/mySignIn' from origin 'https://readingbee.se' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
readingbee.se/:1 Access to fetch at 'https://server-z4fnqa7szq-oa.a.run.app/api/trpc/mySignIn' from origin 'https://readingbee.se' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
https://server-z4fnqa7szq-oa.a.run.app/api/trpc/mySignIn is a trpc callback that seems to work (https://cors-test.codehappy.dev/?url=https%3A%2F%2Fserver-z4fnqa7szq-oa.a.run.app%2Fapi%2Ftrpc%2FmySignIn+&origin=https%3A%2F%2Fcors-test.codehappy.dev%2F&method=get) But the client gives me Cors errors. (I am using nuxt and as you may gather from the url its on firebase)...

Showing pending inside the request?

I am using trpc with nextjs but when I am using hooks they're just not returning anything? Like it makes the request but it goes as pending and just blocks everything