tRPC

T

tRPC

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

Join

Trpc server actions

Are there any plans to bump server actions out from experimental? I like trpc a lot. But server actions being 'experimental' is a little worrying. Been looking at libraries like zsa and next-safe-action. Would like to stay with trpc....

Streaming in React Native?

Did anyone manage to run streaming on React Native?

Help for subscription with redis

My subscription is currently as in the function below. It works, but it doesn't make sense to check the response from redis once every second. How can I make the subscription more performant? I couldn't find an example using redis or rabbitmq. ```ts const listSubscription= profileProcedure...

v11 incompatible with `@tanstack/react-query` > 5.59.9

My code, for example, works fine with v5.59.9: ```ts const [greet] = trpc.tfdExample.greet.useSuspenseQuery( "there tfdExample!", {...

Dynamically generate url for httpBatchLink

Hey there 👋 is it possible to generate a url for httpBatchLink instead of hardcoding one? I attempted the below code, but this doesn't work. Understandably, the fallback value is used for url each time the component mounts. I believe that I wouldn't even need a useEffect if I wasn't using Next, as I could directly grab these values from window.location, but since I'm using SSR, this code doesn't make it through the SSR pass. ```TSX...

onSuccess mutation not being called

Hey, I have this mutation which is called when I click a button. Inside the onSuccess callback I show a toast to the user telling them that the request was successful. However, when I do a state change before I call the mutation, eg setRequests the onSuccess callback never runs, I know this because the console log never appears. But, when I remove the setRequests it does, there is no visible error in my console. Why does this happen? Is it by design? ```ts export const GenerationsCard = ({ generation, selectedFlag, setRequests }: Props) => { const clearMutation = api.generations.clear.useMutation(); const warnMutation = api.punishments.warn.useMutation();...

Module "@trpc/server" has no exported member 'tracked'.

Hi everyone, i'm following the docs for Subscriptions, but am encountering the following error. What's wrong?
Solution:
i wasnt using @next
No description

Re: relative imports to trpc.ts

For reference: https://github.com/trpc/trpc/pull/6112 @Nick Lucas Let's assume for a second it were the case that it's something wrong with the setup. How comes the type inference of type AppRouter = typeof appRouter on the server side works as expected, regardless of relative / path alias import. But only upon client side import, the type isn't inferred properly anymore?...
Solution:
I finally discovered the root cause. It's a typescript issue. By implication you can call this a setup issue. I stay humbled @Nick Lucas 🙏 Basically, using tsconfig paths within the child packages in monorepos is a bad idea :/ The server/user.router.ts will use the client/tsconfig.json#paths for module resolution during the import from client/index.ts (in contrast to imports from within server/)....

Network tab returns array but data is undefined

I'm currently doing some testing with trpc + aws lambda. I have my network response returned with the actual array, but my data property is undefined
No description

Keep old data when changing trpc procedure inputs

Hi! I was wondering if anyone has a best practice for preventing a flash of no data when changing inputs for a certain trpc procedure using tanstack query. My usecase is a leaflet map where the data it fetches changes when changing the zoom or position of the map. But I still want to show the old data when I am panning the map for example. I am currently using something like this where navigate triggers new inputs for the query. ```...

What types of data I could return from tRPC procedure?

As per title, could it be only JSON objects?

AI support

Hey, can I use TRPC with some AI stuff e.g. Vercel AI SDK? I want to stream returned data to the client. Thanks in advance for any tips or tutorials!...

How to get a TRPCClientError shape as in initTRPC errorFormatter for testing

I want to test some UI logic handling errors from trpc but I struggle how to setup the error shape in the test so it triggers proper branches while test. here is my initTrpc ```ts const t = initTRPC.context<typeof createTRPCContext>().create({...
Solution:
OK nvm. Just found implementation of trpclienterror and you can do ``` new TRPCClientError('test3', { result: { error: { data: { apiError: [] } } },...

Basic error handling patterns

Hello guys I am playing around with trpc and I don't know how to do error handling at a route level. I did read the docs about error handling but I don't know if my approach to this problem is good. How do you guys would handle errors in trpc ? For example I have this sign up route. And the way I am doing error handling is by re throwing a TRPCError in the catch clause. Which doesn't seems right. ```ts...

Override output schema for certain mutations

Is it possible to overrider output schema's type for certain mutations? Currently I have a base procedure that has an outputschema as such: ```...

How to handle TRPC error with tanstack/query in components

On the server I've got this fairly simple procedure ```typescript getRooms: publicProcedure.query(() => { throw new TRPCError({ code: "BAD_REQUEST", message: "Not implemented" });...
No description

Migrating to v11 problem: 'reactQueryContext' does not exist in type 'CreateTRPCReactOptions

Hello, When I upgraded to v11, I got this error that I didn't know how to solve it.
Object literal may only specify known properties, and 'reactQueryContext' does not exist in type 'CreateTRPCReactOptions<BuiltRouter<{ ctx: { req: fastify.FastifyRequest<fastify.RouteGenericInterface, fastify.RawServerDefault, IncomingMessage, fastify.FastifySchema, fastify.FastifyTypeProviderDefault, unknown, fastify.FastifyBaseLogger, fastify_types_type_provider.ResolveFastifyRequestType<fastify.FastifyTypePro...'.
Object literal may only specify known properties, and 'reactQueryContext' does not exist in type 'CreateTRPCReactOptions<BuiltRouter<{ ctx: { req: fastify.FastifyRequest<fastify.RouteGenericInterface, fastify.RawServerDefault, IncomingMessage, fastify.FastifySchema, fastify.FastifyTypeProviderDefault, unknown, fastify.FastifyBaseLogger, fastify_types_type_provider.ResolveFastifyRequestType<fastify.FastifyTypePro...'.
...

Following documentation gives error: "You cannot dot into a client module from a server component."

Running: Node 21.6.2, tRPC 11.0.0-rc.553 (client, server, next, react-query), next 14.2.14, and react-query 5.59.0 So, I'm trying to follow the React-Query Server Components setup guide in the tRPC docs, and I've mostly just copy pasted the code out, yet my client component isn't working. This works: ```tsx...
Solution:
ahh, finally found it. typo; 'use-client' rather than 'use client'.

automatically add current path to the useQuery

Is there a way and how to add the current url(path) when call useQuery or useMutation, so that the current path is also being sent to the backend everytime. I think modify TRPCReactProvider might be useful, but that seem to be only evaluate once and not changing according to the page. My use case is that I'm doing /org/[orgname] and I want the orgname to be send to the backend everytime.

Error with AppRouter type mismatch in Deno

Hi everyone! I am trying to fix some type issues with a tRPC project. I am using Deno 2.0. The server and client are separate projects (but in a monorepo). The server is using the hono middleware to host the /trpc endpoint. The client is a vite react static site. I am using the react query integration. Here is the weird part: Everything is actually fully functional. The vite frontend can tRPC query the backend perfectly fine. However the frontend is complaining about type mismatches. Not having working types kinda defeats the purpose of tRPC. client/src/utils/api.ts...
Next