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

Join Server

Infinite query get direction info

Hello everyone, I'm implementing a bidirectional infinite query and i would need to access the direction param into my trpc endpoint: Is it possible to get this param passed in trpc procedure input with useInfiniteQuery? (for info i'm using trpc v11)...

Subscription for a specific user

How can I create a TRPC subscription that takes a userId? When updates occur elsewhere in my app, I want to broadcast them to relevant users. Trying to avoid a full rooms implementation...

Procedure specific custom headers

I'm using recaptcha to protect some of the procedures, and I'm used to sending challenge tokens as headers - this way the don't dangle in actual request data. It's and Astro + trpc fetch project and the server part gives me no issues, but I can't figure out how to run recaptcha and set that header only on some of the procedures. The example shown in the docs would add headers or run function for all of them, and I don't need that
So first you add a flag to request context like this: ```typescript{ lang, person_name: {...

Unable to use caller, in frontend bcz i dont have access to req and res objects

i was trying to use trpc callers, for ssr the queries, but i was not able to create one since i have req and res objects in my context, where my context looks like ```js interface CreateInnerContextOptions extends Partial<trpcNext.CreateNextContextOptions> { session: Session | null;...

Reduce `isPending` time for prefetched Queries?

I'm looking for ideas on how to reduce the isPending time for prefetched getStaticProps queries. Google search console is upset with the LCP render times on mobile, and the LCP is completing roughly one second after the the loading state starts? This is despite the initial data being included in the page load/root....
No description

Beginner Client Problems

Node 21, npm 10.2.4, tRPC 10, from a create-t3-app run yesterday. I've got a zod validator create by drizzle-zod, for inserting into a table. There is a .omit() call to remove fields not allowed to be set by my user. I'm using this in a publicProcedure as the argument to .input(TableValidator), and there's a .mutation() that inserts the data into the database. I have also used a z.infer<typeof TableValidator> to get a type for this data, which I'm using on the client to coerce the single data structure I'm using as test data to that type, to use as an argument to the .useMutation() call....
Our docs also will have examples

How to deal with breaking backend version releases during active session?

What is the best practice to deal with errors that occur if the backend changes but the frontend bundle ist stale? We are using NextJS using SST with an AWS Lambda backend.

useMutation() runs 3 times

Hello, I have this weird problem that all my mutations across the app runs 3 times I don't know why. This is my API in the backend:...

How to protect against Cross Site Request Forgery (CSRF)

How can I protect against CSRF attacks when using tRPC on the client? Usually frameworks would include some kind of CSRF token automatically when submitting forms. Does this have to be done manually on tRPC?

tRPC doesn't explicitly check Content-Type

OWASP recommends explicitly checking the Content-Type header to be the expected one, but when I pass Content-Type: 'application/xml' to tRPC with JSON, it just parses it like it's JSON, instead of throwing a 400 or something. Is there a reason why this is done this way, and how can I change this behavior?

Create a typescript type that refers to a useQuery hook dynamically

I'm trying to create a typescript type that generically refers to a useQuery hook (e.g. I am trying to do type CommonHookFn = (name:string)=>MyCustomType, except I need the equivalent of a useQuery hook where I can templatize the inputs/outputs). From exploring the types under the hood of trpc, I think I need to use ProcedureUseQuery<TProcedure, TPath> to do this, but I can't figure out what I would put in to TProcesure/TPath to tell it that I'm looking for a Query with specific input/output types.. (e.g need a hook that takes a string as n input, and returns MyCustomType for its data) Does anyone know how to create a type like this?...

tRPC Options Method not Allow in Vercel Next.js

I've been getting this error and I have already added CORS in my projects, in initializing the router, the next.config.js, and etc, but still gives a lot of 405 METHOD NOT ALLOWED ERROR
No description

Best way to update a TRPC useQuery response without refetching

Hey, I currently have a trpc useQuery endpoint which retrieves a series of form submissions for a user to review. I have a mutation which allows the user to delete a specific submission, which is working fine. However, I'm wondering what the best way of updating the submissions after I have just deleted the submission in question? I don't want to refetch the entire list of submissions as thats not very efficient, it would be best to just delete the specific submission from the submissions list if the delete mutation suceeded. ```ts...

What is a useSuspenseQuery?

Hi, I'm wondering what a useSuspenseQuery is, im looking at the docs but it doesn't explain it anywhere?
NMNick Montoya2/16/2024

No "mutation"-procedure on path

Hello all, I am using the latest version of TRPC on my client and server. I am using React Query on my client and AWS Lambda on my server side. When trying to perform a test mutation:...

is there a better way to do this?

```js let query; let params; switch (getWhat) { case "posts":...

How to access the query cache data?

I want to be able to use a data from already queried data as an initial data of another query. Is this possible somehow with trpc? I'm using react-query alongside the trpc
TLTrader Launchpad2/14/2024

Thoughts on how to integrate t3 app, connectkit web3 auth, nextjs middleware, and trpc

I am prototyping an application using t3 app with trpc, connectkit web3 auth. I am wanting to use nextjs middleware to protect routes server side. As part of the connectkit auth flow, I have my application wrapped in a ClientProvider:...

onError callback type

I want to have a callback onError passed from parent component to the child which has mutation call. onError should be passed directly to the mutation options but also accept plan Error type and undefined. But I struggle how to type it correctly. ```ts export const DownloadTrigger = ({...

Can I perform react query queries without using a trpc procedure, using useQuery standalone

Hey, I need to perform a client site request, and I can't implement it with TRPC, so can I use regular useQuery method in my Next.js app ? Will the useQuery will be attached to the React Query context of TRPC ?