tRPC

T

tRPC

Move Fast & Break Nothing. End-to-end typesafe APIs made easy.

Join

How to abort a streaming mutation

I have a streaming mutation working, but I need to be able to abort it. I've seen this thread but that syntax doesn't appear to be valid for the React version. If I do this: ```ts foo.mutate(...

middlewares typesafety

if i have a procedure like this (image 1) it uses authMiddleware and then when i use next middleware type of session still can be undefined is that a possible case to happen or just types are not passing between middlewares
No description

how to refresh a request made on server from client side?

basically i have a server component where i fetch data on server then more inside the components tree i have a call to a procedure from client adding some data and i want to invalidate the request fetching data

can I use useUtils hook in trpc 11 ?

export const usePublicBlogs = () => {
const trpc = useTRPC();
return trpc.blogs.getPublicBlogs.queryOptions();
};
export const usePublicBlogs = () => {
const trpc = useTRPC();
return trpc.blogs.getPublicBlogs.queryOptions();
};
...

tRPC File Upload Progress

A similar question was asked here. is there a way, using tRPC's file uploading ability (through FormData) to track the progress of the HTTP request? similar to how you can pipe a fetch request to a progress tracking stream....

How to get the non-array version of a RouterOutput['myRoute']

Hello, I'm trying to remove as many custom types as possible and instead use inferred types in the frontend. It works great to retrieve data from the server, but less when it comes to process that data via .filter() or .map() functions since those need the non-array version of the type. anyone knows how to do it, or a nice alternative? Thanks 😀...
Solution:
How about RouterOutput['myRoute'][number]

How to test a tRPC backend endpoint using Jest and Prisma

https://www.prisma.io/docs/orm/prisma-client/testing/unit-testing i try to understand this doc but idk how to implement it in trpc could you provide an example pls

Mismatched types

Getting the error (attached) when using trpc with separate client and server folders. Is this normal?

AppRouter Type Declaration Method

Is there a method where I can manually define the AppRouter Type outside of importing the AppRouter from the Server as a type? I'm running a more complex monorepo structure and am trying to create a shared type package/module but, if I import the AppRouter as a Type it will create a circular dependency. Ideally, I basically just created a bunch of procedure objects and then stacked them together and was trying to create a base level understanding of the AppRouter as a Type to pass to TRPC Clients that I make. If I am unable to do it this way, I suppose I could just create a seperate shared module for the trpcClient then import it from the server in that seperate module and utilize that module to create Clients per service... But I would prefer to just define my trpcClient within the services as the type of client varies by the service....
No description

Where should authorization/permissions checks happen?

Hey there 👋 What is generally the preferred place to perform permissions checks? Using meta, within a procedure method, within the definition of the procedure via middleware, or something else? I initially opted for performing checks within defined procedure methods, but this results in quite a bit of code duplication, so I figure using meta could be better (it does feel intuitive). Yet, this somehow feels non-standard. I haven't seen this before... in an ideal world this permissions object could be passed into a procedure as an arg alongside the handler/method as a kind of augmentation. Currently, I am exploring the use of meta to do this:...

export full declaration of AppRouter for use in another project

So I have my API server and my web app. They're separate projects and initially I can import AppRouter type with relative paths but it feels messy, but it's ok. Now I have implemented some app specific typescrpt resolve/alias for imports, all my types break as the web project can't resolve those aliases that are present in the api project without sharing the same aliases. I wonder if there is some way to codegen export type AppRouter in to a full declaration that is standalone? Then I can just import that one file without it needing to understand the layout of the other project? Any help appreciated ❤️...

File uploads / downloads

https://github.com/trpc/examples-next-formdata I found this, does this mean it's possible to have file uploads and downloads with trpc now? Does it use chunking or does it put everything into memory.

Setting up open-telemetry

My backend uses fastify + tRPC. What’s the best way to setup open-telemetry. Any repo references would be great. Thanks!

middleware’s for routers

I am using middleware’s in procedures presently. I want to use middleware’s for the whole child router to handle multi-tenancy & role-permission handling. Is there a way to add middleware’s directly to child routers?...

Why did the usage change in that way?

Bit of a general question. Is there a blogpost or a video talking about that? I personally liked the old usage in the component much better: Old ```typescript...

Can I use tRPC with Tanstack Start while fetching or performing mutations from an external API?

Hello everyone! I really appreciate tRPC, particularly its type safety when making function calls between the client and server. In my current project, I'm utilizing external API endpoints for fetching data and making POST requests. Example: ```...

Next.js App router

Hello, is there any official way to implement tRPC with app router, or is it still experimental, according to the example app repo I came across? Any guidance would be appreciated 🙂 Thanks....

Network request was successful, variable was not populated

I'm fetching the data, json is being returned, but trying to use this data is impossible
Solution:
``` const t = initTRPC.context<Context>().create({ transformer: superjson, errorFormatter({ shape, error }) { return {...
No description

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