tRPC

T

tRPC

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

Join

Getting global query loading state on client (react)

Is it possible to get the loading state globally for custom functions? For instance, I want to implement navigationprogress (a moving line at the top) when any query loads and finish when it ends. Not sure if it's possible....

How to share the types correctly?

Hey everyone, I have a basic question regarding sharing types between my Fastify back-end and my Expo front-end. I'm using a monorepo and I'm using pnpm workspaces. My back-end package.json includes: ...

Can I extend the procedure builder?

Authorization in my app is somewhat complicated; I have various resources, and I often have to validate the current user's relation to that resource before allowing them access. Currently I'm doing this: ```typescript myProcedure: protectedProcedure...

NextJS trpc caller and Hono

Hi, do you manage to use appRouter.createCaller? I have nextjs and hono backend separate. I wanted to use caller in server components. I have this in my hono context and on my screenshot was the appRouterCaller. I'm having difficulty to access the context. Hope you can help. ```ts...

RBAC with tRPC

Hi! I’m designing RBAC for our tRPC app, and am exploring ideas. Are there any particular RBAC libraries that integrate well with tRPC, both on the backend and frontend? Any good example repos?

`useTRPC` has the any type meanwhile `AppRouter` doesn't

I'm using monorepo (turborepo) and importing AppRouter from the backend for types. AppRouter appears to have types, but useTRPC doesn't. How can I fix it?
Solution:
Figured it out. Just add these lines to the tsconfig.json file: ``` "references": [{ "path": "../server" }]...
No description

Upgraded to v11.1.3 along with react-query peer dep v5.76.1 and getting internal type errors on

Has anyone experience this when upgrading form v10 to v11? Would love to get this figured out. node_modules/@trpc/react-query/src/shared/hooks/createHooksInternal.tsx(499,30): error TS2540: Cannot assign to 'current' because it is a read-only property. node_modules/@trpc/react-query/src/utils/createUtilityFunctions.ts(12,37): error TS2307: Cannot find module '@trpc/server/unstable-core-do-not-import/clientish/inferrable' or its corresponding type declarations....

How to setup trpc with react router 7?

I'm especially interested in prefetching queries with trpc. I used this tutorial, but here He created caller instead of prefetching queries and then hydrating them. https://dev.to/ayoubphy/step-by-step-guide-setting-up-trpc-better-auth-prisma-and-react-router-v7-4ho ...

create middleware

Hi all, still reading the docs since several hours, im kinda confused about the best way to create a middleware (in my case right now, for auth). some tutos show the t.middleware way, but docs show t.procedure.use(). are there some differences between the two we should be aware ? also doc says ...

Multiple .meta in one route

Hey, is it possible to have multiple .meta fields in a single route or do I have to define multiple routes for that?

Upgrading from v10 to v11

What am I doing wrong? I thought transformer was moved? Seem to be some typing issue. ``` export const trpc = createTRPCNext<AppRouter>({ config() { return {...
Solution:
Solved, had to add this
No description

SSR with Client Components

I've been banging my head against the wall for a while now trying to get the following to work: - I have a client component that gets queries for some data, but I want it to be able to get that data during SSR as well - Right now, a request is made, but it does not pass along headers, causing it to throw an error on the server due to being unauthorized. ...
Solution:
I finally managed to find an (incredibly janky) solution: - A server component runs await headers() and then passes it into a client component that then passes it into a context - The TRPC client reads said headers ...

public/protectedProcedure returns `any` in client usage

Environment: Node v23.3.0 pnpm Problem: hey all, i'm having trouble with defining base procedures for my app.. whenever i call a tRPC prodecure that uses a custom publicProcedure or protectedProcedure method on the client, the types on that procedure are any instead of the types returned by t.procedure....

Mocking tRPC in Storybook

Anybody have working Storybook mock with latest tRPC in Next.js? I found some MSW integration but I can't get it working. Also the integration seems a bit off. Ideally I'd like to be able to define mock per story. Any advices?...

How to combine trpc with legend state?

Hi all, I have configured a project using T3-turbo. Saw this awesome state management library: https://legendapp.com/open-source/state/v3/intro/introduction And wanted to hear if anyone configured their project with it? I am completely new to trpc, trying to figure out how it works. It has plugin for Tanstack Query also. But not sure how I can configure it to fetch data directly from legendstate observors....

gets a massive dataset

hello there, i'm working with trpc integrated in my project nextjs and i've imports the endpoint route into the pages but some endpoint i created have to get a massive and huge data response, when i mount the route in the page its get a long time :feelsadman: to load the data yeah take a while one of the example is:...

How to properly handle errors on the client

I throw TRPCError error in the procedure under certain conditions. On the client I query the procedure and check the error with isError flag returned by hook. The problem is it bubbles the error to the very top crashing entire application. How to stop it bubbling and make it catchable with isError flag? The documentation is poor about handling errors on the client. It's Next 15 with Turbopack and the "new" Tanstack React Query integration....

Type inference issues after upgrading to Typescript 5+

After upgrading an API consuming project from typescript 4 to 5, my calls to .query are inferred to any instead of the actual type. I've tried a bunch of different things but can't seem to get it to work. I also couldn't find anything specifically related to this wrt. TS5. I'm assuming the issue is that some compiler settings changed, and this is somehow breaking the import. What's strange is that the AppRouter imported from the referenced project seems to have the correct shape, but somehow calling a query on the router instance still fails....
No description

tRPC useQuery Promise Rejected Without Error — Hook Stuck in pending

Context I'm using tRPC in a Next.js App Router project and encountering an issue where the result of useQuery is stuck in a pending state. The promise is marked as rejected, but there's no error provided, and the backend is actually returning valid data. Setup Here's how I'm calling the query inside a client component:...

Optimistic updates using tRPC 11 with TanStack React Query 5

I found a similar post in here but it didn't have info that helped so I'm making this one. I have a tRPC query + mutation setup in a single component that looks like this: ```ts const queryClient = useQueryClient();...
Solution:
I figured it out! I was confused by the name "variables" but I understand now that it holds the params passed into the mutation and gets updated immediately rather than waiting for the query to invalidate. I updated my useMutation line to look like this: ```ts const { mutate, variables } = useMutation(mutationOptions);...
Next