TRPCError: Missing content-type header
Hi, i haven't been using trpc in a while, i'm trying o setup TRPC on a fastify backend and react frontend.
I followed the example from the doc but when react tries to fetchs some data i get the following error:
```
Error in tRPC handler on path 'undefined': TRPCError: Missing content-type header
at getContentTypeHandler (/Users/andreabenfatti/Dev/tmp/fastify-test/node_modules/.pnpm/@trpc+server@11.0.0_typescript@5.8.3/node_modules/@trpc/server/dist/unstable-core-do-not-import/http/contentType.js:221:11)...
Solution:
Right after asking the question I found the problem. It something that has to do with CORS. I solved it using vite proxy to forward the request to the server and now everything works as expected
How to add recaptcha support
Hello! I am looking to add ReCaptcha v3 support to a few of my trpc endpoints. I am not able to find any reference to how I can do this.
I am using create-t3-app...
Solution:
The same way you’d with any api right? You could make use of a “reusable base procedure”.
https://trpc.io/docs/server/procedures#reusable-base-procedures...
Prisma ESM (node-postgres) / tRPC 11 / Next.js 15 issue
Hi everyone!
Key components of our stack:
- Prisma 6.9.0 (with pg adapter)...
Preventing action from throwing error due to zod schema?
I have trpc creating server actions, fronted by a zod form data schema.
```
const createDatasetSchema = zfd.formData({
name: zfd.text(...
Caching a middleware response during batching
Hey there, I do some authorisation checks in middleware (procedure) - the authorisation check is a little bit slow. I'm facing an issue that when the page initially loads, there is a significant amount of TRPC requests sent as a batch and although it's sent as a batch, each path still runs the procedure.
Is there a way to cache the procedure response for the same request, or use the same procedure output for multiple requests during a batch?...
Limit payload size on specific routes?
When using TRPC, is there a way to limit payload size on specific routes? E.g, for a route that accepts base64 encoded images, I would like to limit the maximum body size to 10mb.
For all other routes, I'd like to limit the maximum body size to 1mb....
Custom hooks v11
Is there a successor to
inferReactQueryProcedureOptions in the updated react-query integration or what's the recommended way to infer the query options for custom hooks now?event emitter doesnt trigger subscription from webhook
I'm using subscription in nextjs using SSE, im trying to trigger subscription when webhook receives data, webhook is seprated page
api/webhook/route.ts and subscription is in root.ts, I even tested subscription using little mock of mutation and subsciption procedures and it was working fine,
here is the test which works ✅
```js
test: createTRPCRouter({...Track mutation status in other react components?
Is there a way to check a mutation isPending in another component from the on it was called in? I can see the useUtils providers a isMutating() function. But I tested and it doesn't seem to be changing. This is v11
Zod Output validation failed
Hello, i'm using trpc and for some reason the return statement passes the type checks but at runtime it fails the zod validation, why?
Getting global query loading state on client (react)
Is it possible to get the loading state globally for custom functions?
For instance, I want to implement navigationprogress (a moving line at the top) when any query loads and finish when it ends.
Not sure if it's possible....
Can I extend the procedure builder?
Authorization in my app is somewhat complicated; I have various resources, and I often have to validate the current user's relation to that resource before allowing them access.
Currently I'm doing this:
```typescript
myProcedure: protectedProcedure...
Solution:
Yeah it's possible to do what you want:
NextJS trpc caller and Hono
Hi, do you manage to use appRouter.createCaller? I have nextjs and hono backend separate. I wanted to use caller in server components. I have this in my hono context and on my screenshot was the appRouterCaller. I'm having difficulty to access the context.
Hope you can help.
```ts...
RBAC with tRPC
Hi! I’m designing RBAC for our tRPC app, and am exploring ideas. Are there any particular RBAC libraries that integrate well with tRPC, both on the backend and frontend? Any good example repos?
`useTRPC` has the any type meanwhile `AppRouter` doesn't
I'm using monorepo (turborepo) and importing
AppRouter from the backend for types. AppRouter appears to have types, but useTRPC doesn't. How can I fix it?Solution:
Figured it out. Just add these lines to the tsconfig.json file:
```
"references": [{
"path": "../server"
}]...
How to setup trpc with react router 7?
I'm especially interested in prefetching queries with trpc.
I used this tutorial, but here He created caller instead of prefetching queries and then hydrating them.
https://dev.to/ayoubphy/step-by-step-guide-setting-up-trpc-better-auth-prisma-and-react-router-v7-4ho
...
create middleware
Hi all,
still reading the docs since several hours, im kinda confused about the best way to create a middleware (in my case right now, for auth). some tutos show the t.middleware way, but docs show t.procedure.use(). are there some differences between the two we should be aware ?
also doc says ...
Multiple .meta in one route
Hey, is it possible to have multiple .meta fields in a single route or do I have to define multiple routes for that?
Upgrading from v10 to v11
What am I doing wrong? I thought transformer was moved? Seem to be some typing issue.
```
export const trpc = createTRPCNext<AppRouter>({
config() {
return {...
Solution:
Solved, had to add this
SSR with Client Components
I've been banging my head against the wall for a while now trying to get the following to work:
- I have a client component that gets queries for some data, but I want it to be able to get that data during SSR as well
- Right now, a request is made, but it does not pass along headers, causing it to throw an error on the server due to being unauthorized.
...
Solution:
I finally managed to find an (incredibly janky) solution:
- A server component runs
await headers() and then passes it into a client component that then passes it into a context
- The TRPC client reads said headers
...