tRPC

T

tRPC

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

Join

Tprc Tanstack integration types

Hello guys! I wanted to create a reusable query, like this: export function useProjectBySlug(slug: string, options?: any) { const queryOptions = trpc.projects.getBySlug.queryOptions({ slug }, options); return useSuspenseQuery(queryOptions); } ...

Migrating v11 from classic client to TanStack Query: “Error: experimental_prefetchInRender feature ”

My code was working using the classic React client, but the shiny new feature set promised virility and good looks. But when I call useQuery() on my API, it's returning a rejected promise with the error message "Error: experimental_prefetchInRender feature flag is not enabled". Why does it think I requested a prefetch, and how do I correct the code so it doesn't request a prefetch? I asked Copilot and got this response: ...
No description

types not working if input provided

Hey guys, just getting into tRPC: If i add a input to a query, in the client, the types are not working anymore. thats normal? is there any way around this?

how to handle non-trpc errors?

I'm using supabase, and other custom errors within my trpc procedures. The errors thrown are all converted to TRPC errors INTERNAL_SERVER_ERROR, when some of these errors should be converted to other type of TRPC errors. How can i manage this ? I tried the onError handler, but its too late at this point. the error is already a TRPC error. I tried using a middleware as well, but the errors throw are not caught by the middleware. The only reference I've found in the docs is here:...

can't access property Symbol.for("trpc_untypedClient"), client is undefined

hey guys, just tried to get into tRPC and use it with react query: after setting up the provider and using it like this, I'll get the error above: ``` const onClick = async () => { try { console.log("clicked");...

Trpc routes code execution during nextjs build process

I have some trpc routes that access redis db and during next build this code is executed which results in redis errors trying to connect to the server... How to work around this... This seems like nextjs is trying to pre-render trpc ??...

Type errors when deploying to Vercel using new client integration

Hey, wondering if anyone else had a similar issue and found a fix for it. I have a Turborepo monorepo with a Next.js app and a trpc package. When trying to deploy to Vercel, I'm getting type errors like Property 'map' does not exist on type '() => never'. The relevant code snippet would be this: ...

error handling on server side

how to properly catch the error from procedure on server side in nextjs? in my case im calling a procedure in server component with param from url, in the middleware i check if the provided param is correct, if not i throw NOT_FOUND, how can i properly handle that error when calling the procedure?...

Monorepo with shared trpc router type

I'm building a monorepo for a single-page application and want to structure it like this: app/server app/client packages/shared...

Stop File stream if file is too large

Hey guys! I'm trying to do some file upload with trpc and I took the example from here: https://github.com/trpc/trpc/blob/main/examples/minimal-content-types/server/index.ts ```ts file: publicProcedure.input(octetInputParser).mutation(async ({ input }) => {...

TS error when JSON field in Prisma - Type instantiation is excessively deep

error seen here ```ts const field = trpc.field.find.useQuery({ documentId: props.docId, path: props.fieldName,...

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