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


Calling procedures from Next server actions

Hi, is using trpc client allowed in server actions? I have two use cases, in one i call procedure from server component with the 'use server' ``` 'use server'; export async function getCandlesticsData(symbol: string, interval: KlineInterval) {...
HAHamza Ali4/19/2024

TRPC Typescript auto serialize error

The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed i have tried merge routers but its still not working If someone had encountered this issue and resolved this please let me know....


Does anyone have a basic example on how to set up MSW in a React Vite TRPC env? My main question is, how to use MSW to mock my TRPC requests. In a non TRPC environment my handlers looks like this: ``typescript http.get(/api/my-svc/foo`, () => {...

Revalidate / invalidate in server components

Is there a solution for TRPC query invalidation (or revalidating), passing the actions from the client component where the action happens to server components? So far, I've only seen examples where you have to turn the respective server components into client components. Are there any better solutions?

Typescript type error with latest version

I'm initialising a project with trpc v11 and I'm trying to strictly follow the documentation for react-query. I face a problem: everything works fine at runtime but in vscode I have 2 typescript errors: 1/ My hello procedure get this type error on useQuery : Property 'useQuery' does not exist on type 'never'.ts(2339) on this line const q = trpc.hello.useQuery("thing"); in my component....

Don't understand cache

How come my API is still getting called when it's already been called with other inputs? Ex: 1. api fetch with 1 as the input 2. api fetch with 0 as the input I expect if the input gets set to 1 again, the API would not be called because we already fetched the result for that...
HAHamza Ali4/15/2024

The inferred type of this node exceeds the maximum length the compiler will serialize.

I'm facing this issue. The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed i have tried merge routers but its still not working If someone had encountered this issue and resolved this please let me know....

Getting strange react error in nextjs

I am getting a strange Error Message when nextjs tries to compile: ```js TypeError: reactWEBPACK_IMPORTED_MODULE_1.useContext is not a function at Config (./src/components/developer/config.tsx:13:80)...
No description

Error on NextJs AppRouter

Anyone knows why this is showing on my console?
No description
RHRasel Hossain4/12/2024

TRPC Dynamic Procedure URL

I am currently using QStash as a message queue with TRPC. QStash is HTTP-based and in the example below, you can see that I call the TRPC procedure URL when publishing a message using QStash. My question is, how can I make this URL dynamic? Instead of repeatedly writing the full URL, I want to use a function call like
. how can I do this in trpc?...
No description

Is it possible to get the procedure name / id in middleware?

I want to create a caching middleware that in some routes, stores a cache key that contains the route id (example: catalog.product.findMany) and the input (example: { categories: shirts }). It's not clear to me if this is possible.

tRPC + React Query Data Invalidation?

Hey y'all, I'm working with tRPC and React Query and just trying to understand how this works. I have a call that basically sees if the server is online or offline, however, when I disconnect the server I'll get the error eventually on the client, but it won't nullify the query data. Is that normal? Perhaps it just keeps it in the cache -- can I invalidate it to get the proper info? Ex. it'll show online when it's up, but when I turn it off it'll show... error fetching...

trpc optimistic updates causing data flicker

I'm trying to add optimistic updates to a calendar component but when the mutate function is called there's a flicker in the existing events

> Error: Invariant: headers() expects to have requestAsyncStorage, none available

Hi, I use trpc v1045.1 in next 14.1 app router. I call it server side and have the following. ```js export async function createContext(opts: CreateNextContextOptions) { const { session, user } = await getUserAuth(); ...

How do I exclude properties while returning data?

I basically need to create a dto's that would exclude properties like access keys etc. while returning the data to the client - so basically just striping the object on return. How can that be achieved?

Does anyone have an example of subscriptions implemented in CloudFlare Workers?

I'm trying to use subscriptions via WebSocket in CloudFlare Workers, but it's been a real pain so far. Looking for any advice, thanks in advance!

TRPCClientError: Unable to transform response from server

I am currently encountering this error occasionally in my apps. I am using a Monorepo, which includes a mobile app and two web apps, all connected to a single database using Prisma and using TRPC in all apps. I have been trying to determine the cause of the error, but I still have no idea. I would appreciate it if anyone has any ideas or has experienced this issue before. Thank you

Unexpected token

Works fine locally, doesn't work when deployed to AWS via Was working last night. Redeployed the app today with no changes, started failing. Please help

Context is not being passed correctly

I will include my setup at the end. My problem is that I am using nextauth with database sessions and passing the session as context into the procedures; however, everything that I have added myself isn't being included in the context for some reason ( and user.role) This is my session type I declared, ```ts declare module "next-auth" {...