tRPC

T

tRPC

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

Join

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

Query via a non-connected wsLink never times out despite AbortSignal

When the wsLink is disconnected (eg server not available), is it normal that a query does not timeout despite passing an AbortSignal ? I was not expecting this behavior. Is there an easy workaround for this? ```ts import { createTRPCClient, createWSClient, wsLink } from "@trpc/client";...

Where did useUtils go?

I am working through upgrading my project and I use useUtils here and there to do fetches from components like ag-grid which requires a data source It looks something like this ```js...

get state of streaming response

Is there a way to get the state of a streaming response when using https://trpc.io/docs/client/links/httpBatchStreamLink and returning an async iterator? "isPending" is false once the headers arrive and I did not find anything else....

How can I break this loop when the client disconnects?

onReceiveMessage: protectedProcedure .input(receiveSchema) .subscription(async function* ({ ctx, input }) { let lastCheck = input.lastMessageTime ?? Date.now() ...

Early return for certain input parameter for queryFn

I want to transform this useQuery to trpc ```typescript import { useSuspenseQuery } from "@tanstack/react-query"; import { useParams } from "next/navigation";...

Upgrading tRPC v10 to v11 in NextJS 15.0.1

I'm want to upgrade my tRPC to v11, I already follow the instructions on the docs https://trpc.io/docs/migrate-from-v10-to-v11#installation--upgrading using pnpm. Installation is running smoothly, but when i run pnpm build i get ```...
No description

best practice for invalidating protected queries upon profile switch

I have an app where users can have multiple profiles. I have a protectedProcedure that does a db check on the user and profile ownership as a base. on the frontend, once user switches profile, I want to invalidate all queries that are "protected". Well known option is:...

Can I use tRPC on multiple platforms?

I want to make tRPC + Next.js my primary tech stack for building all my full-stack web apps, but the problem is, what if in the future I decide to build a mobile app for this web app using Expo (a React Native framework)? Can I still use tRPC as my backend? Like, does it have a REST API that I can fetch from the Expo codebase?

Missing Module in TRPC Migrate

I know you just released the migration for the TRPC upgrade but I thought I would share that I got this error ``` ❯ npx @trpc/upgrade@11.0.0-rc.772 node:internal/modules/cjs/loader:1408...

correct way to handle errors run time errors

I want to handle errors, for example when executing this mutation an error appears ```tsx "use client";...
No description

Nextjs Proxy an exteral TRPC api via pages/api/trpc/[trpc].ts ?

I have an already built TRPC api and I would like to use it in my nextjs application. I would like to proxy it from the [trpc].ts. I have tried http-proxy-middleware which works but it break sometime which is a bit difficult to debug. wondering if there is an example or some doucmentation around this use case ?...

Redirecting

Is it possible to use NextJS redirect inside a procedure? I don't want to do it onSuccess every mutation I make to that endpoint

invalidate query

whenever i add a user my user list is not updating ```tsx const mutation = trpc.user.addUser.useMutation(); ...

How to let an LLM "use" a tRPC api?

Hey, so I've been wondering lately how to build a simple LLM-supported CRUD app. With REST APIs, it's clear: I can give an LLM the entire API specs (e.g. using openAPI / swagger, etc.) and then ask it to translate the natural language user request (e.g. from a "chat") into a series of actions, using the REST endpoints. Then the LLM can write curl request code, for example, to "use" the REST api. But from a react / typescript perspective, using tRPC is just A LOT better (no need to tell you, hehe). How would you design a system where an LLM is basically "an additional client" that uses tRPC? Would the LLM have to generate typescript code (instead of curl requests) that I'd have to run? How would the LLM know about the api spec? Any other ideas here?...