tRPC

T

tRPC

Join the community to ask questions about tRPC and get answers from other members.

Join

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

Typing on trpc.createClient?

Basically I want an asyncQuery I can call later, the way asyncMutate works. I can do this: ```ts const profileData = await trpcClient.query( 'seer.evolution.getProfile', 'name'...

generate types and publish them in a npm package

hey hey, i am a trpc beginner. i was able to get trpc running in a nx monorepo. now i need to publish my trpc router types as a npm package, so that it can be installed and consumed via npm in another one of our projects....

withTRPC not working in RootLayout

I followed the T3 example to set up TRCP in my project https://create.t3.gg/en/examples. I am using the newer next file strucuture with the app folder, no pages folder, no _app file, but a root app/layout.tsx file. I want to use withTRCP on the export of the root layout. However I get the error: Error: useState only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component. Do I...

Using superjson transformer makes data empty

Hi! I've been developing using trpc for the past month or so. It's been a smooth sail so far. Suddenly now the .data property on trpc queries are empty. Checking the network tab the data is definitely there in the response, it's just undefined when accessing query.data. After some time debugging, I removed the superjson transformer from client & server, and now things are working again....

Client unable to send requests on certain internet providers

Summary Hi, we built a Expo React Native app with over 350k users with tRPC making calls to our backend edge functions hosted on Vercel's Next.js app. The issue is that we don't receive the requests for a certain subset of our users in our production environment. ...

How to get mutation onError typescript type

I have two mutations on my frontend that should handle the response in the same way. So I extract the onError function so these two mutations can re-use the logic but I have a problem on how to type the error so the in function handling is pleased with typescript and the onError handler is also pleased. ```ts // What type of the error should be here? const onApiError = (error: ???) => {...}...

Server component (createHydrationHelpers) setup with external router

Hello! Just wondering if anyone has followed the server component setup guide but with an external tRPC router? I'm unable to call createCaller is the router is deployed externally. https://trpc.io/docs/client/react/server-components...

How to use client and react-query simultaneously?

I'm using this with nextjs app router and i want to have access to both query and useQuery methods.

all my inferred typings on the frontend are `any`

I have a backend trpc router like this: ```typescript import likeRouter from './like'; import postRouter from './post';...

unstable_concat return type is not been propagate to the input

I have a plugin that fetches all my services. I am not sure this is the best way it works for me. The problem is that the input type is not updated after the transformation. Thanks 😃...

is it possible to use trpc without the app router?

is there a pattern to define mutations/queries as individual routers and then import an individual router for that procedure into my frontend? the AppRouter type is blowing up the compiler

Why not create queryClient and trpcClient outside of React?

From the docs: https://trpc.io/docs/client/react/setup#4-add-trpc-providers Relevant excerpt:```jsx export function App() { const [queryClient] = useState(() => new QueryClient())...
Solution:
I'm so goddamn stupid, i literally asked the same question this June already: <#1253685017931022347> And also they even explain this in the docs below the code snippet... I AM INCAPABLE OF READING 🤬...

Invalid hook call using useQuery

Hello, I am trying to implement a common component that accepts a function props that will fetch data from the server. For example, see the code below: ``` export const UsersTable = () => { return (...