tRPC + GCP headers issue
Hey everyone,
I'm currently working on a tRPC-based app and I'm facing an issue with retrieving headers set by GCP when there are errors like 504 or 500. Specifically, I want to read the X-Cloud-Trace-Context header from the frontend.
In my browser, I can see that the header is being sent, but I can't seem to access it from my response in the code. Here's my setup:...
Data Race in a useEffect
Hi,
I have been using tRPC for a while, and it has been amazing. I am currently running into a small issue. In one of my components, I create a new project and onSuccess, I refresh the endpoints:
`const { mutate: createProjects } = trpc.createProjectsFromCsv.useMutation({...
TRPCClientError prior to the request being sent (v11, App Router)
Anyone else had this occur where you just get a TRPCClientError without the request even being visible in the network tab?
I'm moving my app from pages router to app router, and testing client-side fetching with prefetching from the server.
Consider the code below as an example...
react-query no cookies on initial load
Using react-query client on a page that uses router server caller, when initially loading that page, react-query client does not pass cookies through.
Here is a minimal reproduction repo, created with create-t3-app: https://github.com/Shmookoff/trpc-react-query-no-cookies-on-initial-load
1. Cookie test is set in the middleware.
2. The / page is invoking a procedure using server caller....Brainstorming how to convert REST api to tRPC
I have a use case where I have a url that looks similar to
/stores/:store/items/:items and store could have many sub routes to it. is there any ideas on the best way to convert this into a tRPC route?Solution:
create a stores router with different procedures, items being one of them, and then pass :store and :item as fields on your input object, so something like:
```ts
// ...
.input(z.object({ storeId: z.string(), itemId: z.string() }))...
rate limiting with @fastify/rate-limit
node 20.13.0
pnpm
@fastify/rate-limit ^9.1.0
fastify ^4.27.0
@trpc/server 11.0.0-rc.401...
Shopping cart + TRPC
What is the best practice for me to add a "cartId" cookie when performing a "cart.addItem" mutation?
This cookie would store the order ID in the database.
How can I be doing this?
I'm using Next.js but I believe I will move tRPC to a separately hosted API on an Express/Fastify server...
createTRPCReact cannot be named without a reference to x
Hey, I have a monorepo where I have a separate package for trpc (@repo/api) which I'm trying to use on the frontend.
When trying to create
createTRPCReact I'm getting the following type error
```ts
The inferred type of 'trpcReact' cannot be named without a reference to '../../node_modules/@repo/api/dist/router/post'. This is likely not portable. A type annotation is necessary....How do I use the rsc-rq-prefetch example with a protected procedure?
Thank you for this implementation! It looks sooo promising 😀
However, I ran into an issue when trying it out:
https://github.com/trpc/trpc/blob/next/examples/.experimental/next-app-dir/src/app/rsc-rq-prefetch/page.tsx...
how to handle or hydrate error throwed in prefetch with streaming?
i tried next-app-dir / rsc-rq-prefetch example, but there have only success case, not failed.
if i throw error in prefetch request, next js redirect me error.tsx is there way to send error to rq with streaming?...
Procedure passed as argument to function loses type safety.
Hi there, I have a mystifying TS issue, where I lose type safety of my proc when I pass it as an argument to another function. I'm new to tRPC, and been doing a spike to see if we can adopt it at our company.
Full code example is in this TS playground: https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAb2AO2DAKgJQAoGEA0cWeAolFNIQILICe2FAxgKYAmArlMwL5wBmFEHABEAARhQwjAPQBnZlABuC4QChQkWHABUcAIay4ALwit+gkSdbCA3KtWMIyWfHgBeOCjTFcAOkfIMMwAHjAAPAhw7PJQAFyIcBQANsyy8S5QKADmANoAunC8AD5RyKzMfChshQB8ABQAlP5cekGNdqohmvABLokQ7EFQcB4wvhSDCnZd0D1OfWDsAEZJwIwMECwcXCNwY2BMbJzMHTC0YMxwG4y7mMwwnMjo58xhZxcQfHCLK2vXR1xfChFjAah0Zlpej0WkEfCQypAUO44GF0HAQkEyoZrvUDpt4uhCAB9CBgGDAebxBDcBojGqIVRwRL3R7fJi+aLMOp1UkwWS0tz03myXzIDF1SKMGDBKn8CAQeIAcj48sVhRpDVU3HBwW6cChcFWfQ8jBhzDhCIgSLqjO+y1W60O22YQOQILqVl8ECWACtmFKJYbQGh4p7kOwQEsFI0vWSKcg9ElGoUGg18LbqaomgBHdgKWjc4UC+kIW3SaTo3X++CrEBoPYQOBRvYvMyOcjVmx7AAWwEMsm7AySZmbemQ6PI0Cb-r0nKDdfgfbgAANw5GFHASuwyhUqqxl2WKygXMw9KxCGhFYZGJwuIEkrQV2PaAemeW4OJZABaLrVn+TqBbQNIlZAARnSCRsl2YVXRBAB+XxazQOwmWA2QACYIMyZAsmgskRSlYJfBVCAUOZB4oHHfItQaOwgA
The issue is that with the definition of
createTRPCEndpoint, the returned procedure loses the type definition of input....Error "Subscriptions should use wsLink"
I have made a stackoverflow post, hoping if I can get some help!
https://stackoverflow.com/questions/78653455/error-subscriptions-should-use-wslink-using-trpc...
Why are `new QueryClient` and `trpc.createClient` run inside a component in the React setup?
From https://trpc.io/docs/client/react/setup:```ts
function App() {
const [queryClient] = useState(() => new QueryClient());
const [trpcClient] = useState(() =>
trpc.createClient({ ... }),...
How are errors handled in batched requests
We're using httpBatchLink, and have noticed that when multiple procedures calls are batched together and one fails, the other procedure calls don't appear to even be attempted (at least according to our otel instrumentation). Is that the way batched procedure calls are expected to behave?
File upload with formdata
I'm trying to upload a pdf file to R2 and save metadata to my postgres database (both through a trpc procedure).
I followed the example in https://github.com/trpc/trpc/tree/next/examples/next-formdata but I get the error copied below. I have been stuck on this for hours and don't know what I'm doing wrong.
Envrionment: Next.js 14.2.4 / pnpm ...
Solution:
I couldnt make it work either, my solution was to (exceptionally) do everything in a server action. This allowed me to send a formData object to the action that runs in my server and then use trpc server from within the action to uipdate the entity's URL (I'm assuming u'll need to store the url somewhere afterwards). Hope this helps
Zod formatting Error
I'm using Zod for validation and whenever I get a validation error I'd like to be able to get the error message properly formatted. In the docs there's a section for this where it's sepcified that we can use the errorFormatter to achieve this. However, it's not doing anything at all. Btw, if I add a console.log within the errorFormatter nothing's being shown in the console, which is kind of weird if you ask me. However superjson is working completely fine, so I dont think its a configuration problem....
Here's my code
```...
When a procedure returns an instance of a class, the superjson isApplicable doesnt detect it
When a procedure returns an instance of a class, the superjson isApplicable doesnt detect it as that class, but when you return it inside an object or array, it does.
```ts
// ❌
class Test {
a: string;...
Validating inputs and outputs only via typescript
Hey everyone,
I am trying to create an appRouter with
ts-morph but I am having trouble with passing the zod schema/object instance to it (since I need to pass the original implementation, not the instance).
I was thinking about a way to work around this and was wondering if I could somehow just pass the zod typescript type in the inputs and outputs - keep in mind that my usecase only calls for the type definitions to work, not the actual implementation.
```ts...Zod error not being formatted
I'm using Zod for validation and whenever I get a validation error I'd like to be able to get the error message properly formatted. In the docs there's a section for this where it's sepcified that we can use the errorFormatter to achieve this. However, it's not doing anything at all. Btw, if I add a console.log within the errorFormatter nothing's being shown in the console, which is kind of weird if you ask me. However superjson is working completely fine, so I dont think its a configuration problem....
Here's my code
```...