tRPC

T

tRPC

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

Join

How to wrap response type with useAsyncData from Nuxt?

I'm using the vanilla client with Nuxt currently but it's a little tedious calling useAsyncData(() => client.someProcedure.query()) on every call so that I don't double fetch during SSR. Is there a way to make a wrapper client that will wrap query and mutation responses with the useAsyncData() call? I would love if the client was typed and I could call it the same way I can call the vanilla client.

How to define per route staleTime on queryClient?

It looks like I am unable to override the default stale time provided to react query client, no matter how I define the the route. Is TRPC overriting these dafult somewhere down the chain? ```typescript export const createQueryClient = () => { const queryClient = new QueryClient({...

Can i use a single trpc proxy client in NextJS 12?

Hey guys quick question if anyone is around. Are there any issues with defining a trpc proxy client once in nextjs pages router and then reusing it in client components by manually passing it to a useQuery? Unfortunately our backend team has created multiple trpc routers and we still haven't upgraded from react-router v3, so the trpc-react-query integration isn't a high priority for us, but will there be any caching or request sharing issues when using a single trpc proxy client? ```ts // define this once in src/trpc.ts export const trpc = createTRPCProxyClient<AppRouter>({...

[Typescript] Client query/mutate has any type

So, apparently AppRouter type has all info about existent queries/mutations, but shows <any> for input and Promise<any> for output of query/mutation. How to fix it ?...
Solution:
My problem lies in my project's monorepo architecture and reexporting schemas within monorepo and then infering types with zod
No description

Trpc V11 Nuxt 4

Hello, I was wondering if theres a possibility to have a trpc v11 example repo maybe on the examples page since the trpc-nuxt module is not really maintained. Also I think a module is not really nessesary with v11? Thanks in advance!...

server side prefetch + optional client side refetch

Hello, I'm looking for advice on a pattern for server-side prefetching with optional client-side refreshing in Next.js. Current setup:...

[Help] Fastify session http only cookie differs

Solution:
The problem is probably with fastify/fastify session plugin. fastify.register(session, { secret: "supersecret1234567890supersecret1234567890", // Use a strong secret here for production. ...

126 routers | TS7056: inferred type node exceeds - Multiple Providers?

Hello hope you are all well. quick info: env: node 20, pnpm, trpc^11.0.0-rc.466, monorepo. Everything in my monorepo is built/typescript declarations (otherwise autocomplete is a snail). I have 126 routers (didn't realise it was so much)...

How to get cursor in new Tanstack Query integration?

How can I access the cursor (or pageParam) in the new infiniteQueryOptions function? The current procedure input takes a cursor but I'm getting and error saying cursor is not passed to infiniteQueryOptions, and I can't pass it manually as it is calculated using getNextPageParam.

monorepo can't resolve trpc context

I'm usig a mono repo with next15 and trpc v11 + pnpm. I can't seem to share the trpc across the monorepo for some reason. What is weird is that the dev server runs it well but the build can't seem to find the useContext from the trpc. Says it collides with something. Type error: Property 'Provider' does not exist on type '"The property 'useContext' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'useUtils' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'Provider' in your router collides with a built-in ...'. Does anyone have a decent idea or a suggested setup for express backend, nextjs front, and trpc 11? I want a mono so that I can share a lot betyween them + share hooks with future projects. I want express so that I can scale them in AWS. and next pushed through AWS amplify. That's the current idea ayways. This is my experimental project where the dev works but the build fails. This is killing me for over a week now.
https://github.com/dsmurl/an-express-next...

Catch the error on trycatch and show the message

Hello, I am throwing a TRPCError inside my procedure ```js throw new TRPCError({ code: "BAD_REQUEST",...

operation input is formdata but trpc makes it an application/json POST call

operation: ``` { "type": "mutation", "path": "vectleProfiles.updateProfileLogo",...

v11 with tanstack mutation not invalidate query

When the mutation is successful and the router switches to the dashboard, sometimes the data refreshes, but other times it does not. However, if I press Alt + Tab, the data refreshes.
No description

Extra query keys for functions for invalidation

Is it possible to easily provide extra query hashes for functions? For example, lets say i have a procedure GetCurrentState()...

Type 'DecorateQueryProcedure<{ input: string; output: { id: string; name: string; }; transformer: fa

Hi all, I'm been trying to hook TRPC up with my Vite + Express stack. The guides work OK but when I try to use a procedure I get the following error. ```...

Should `.queryFilter()` not take a partial arg?

Replacing .invalidate(partialObject) to qc.invalidateQueries(trpc.path.queryFilter(partialObject)) doesn't work, since queryFilter type isn't partialled. Is this correct behavior? I would imagine the filter could be anything Really like this integration update btw πŸ™‚...

skipToken combined with the new tanstack query options

I am trying to prefetch the next x pages in a table, but i have some logic to determine whether or not this should happen. I used to use skipToken for this, with the old tanstack query package, and it seemed to sort of working. I tried changing the code to fit the new react query package, but it instead of skipping it now runs the API call without any options. ...

different transformers for different routers

How can I specify a transformer per router? On the client, I use superjson with BatchLink for everything, except file uploads (no superjson, HttpLink). It works fine, but on the backend all routers use superjson, so the returned object has a wrapper with a single json field in it, and TS types are mismatching (TS types assume no wrappers will be there)

super quick question about prefetching

Is it best to use a promise.all when using multiple instances of prefetch to fetch data on the server to ensure that both queries are running at the same time? From the looks of it trpc handles this automatically so it is unneeded?
await Promise.all([api.guild.get.prefetch({ guildId }), api.application.getList.prefetch({ guildId })]);
await Promise.all([api.guild.get.prefetch({ guildId }), api.application.getList.prefetch({ guildId })]);
...

TRPC not writing to QueryCache?

Hi all, I've been using TRPC in a production site for over a year now. I recently have made some additions to this site that required cache invalidations, but for whatever reason I couldn't get them working. Troubleshooting the reason led me to discover that it appears the querycache my trpc instance is using is just always empty. (Empty cache = nothing to invalidate?). I built the app using T3 and when I migrated to app router I built a new T3 app and used it as a reference. I've been looking at the differences between a fresh T3 creation and my app and I just can't find anything that could be the culprit. I've tried saving the queryclient to the window and it looks fine except it’s got an empty cache....