tRPC

T

tRPC

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

Join

offline mode (expo app)

I have an expo (react native) app which uses better-auth, tRPC, hono router, mysql DB. Do I have any option to enable the 1 core feature of my app (daily emotion tracking) to work in offline mode (i.e. no network) and sync when network is connected?

Wrong code

Do you think this needs to be updated? Because I don't know how I can enable the flag.
No description

Using react server components with separate API

Hi I have a separate API from my frontend, when setting up https://trpc.io/docs/client/react/server-components how would I be able to have it use my separate API url instead...

Expo and nextjs TRPC issue

Hello, I have a Nextjs project and an Expo mobile application that I am trying to use trpc between my native app and nextjs backend. When I try to fetch data from my mobile app, i get the following error: [TRPCClientError: right operand of 'in' is not an object]...

Can we use trpc route inside another trpc route?

I have two routes, one is for generating image, and another one is uploading and creating a row in DB. So I am wondering if we can use the generating image route after the creating row in DB.

prefetchInfiniteQuery example?

Hi, I'm trying to switch to the newer tanstack react query pattern with our existing nextjs codebase, but I keep getting type errors when trying to use queryClient.prefetchInfiniteQuery. I noticed there's no infiniteQueryOptions alternative to queryOptions on trpc.{aRouter}.{procedure}, so I'm assuming I have to configure queryOptions somehow to get it to take. That's on the server, the situation is similar on the client. When I try to pass options to useInfiniteQuery I get the following error: Type 'DefinedTRPCQueryOptionsOut<LedgerResponse, LedgerResponse, TRPCClientErrorLike<{ transformer: true; errorShape: DefaultErrorShape; }>, { keyPrefix: false; }>' is missing the following properties from type 'UseInfiniteQueryOptions<unknown, Error, InfiniteData<unknown, unknown>, readonly unknown[], unknown>': getNextPageParam, initialPageParam ts(2769)...
Solution:
Nm, I see it's documented under the React Query Integration (classic). Must provide a cursor field to unlock the infinite properties. https://trpc.io/docs/client/react/useInfiniteQuery

react-native crashes with trpc > 11.3.0

Hey, I am currently setting up trpc in our codebase. We have a monorepo with React webapp, Express.js API (node 20) and React-native mobile app (Expo 53). Once I add "@trpc/client": "^11.7.2" as a dependency to the mobile app, it crashes on start immediately. The logs show this error. ``` _unstableCoreDoNotImport.createRecursiveProxy is not a function (it is undefined)...

Invalidating Queries

Hey! Might be being thick here but I'm implementing in an optimistic update layer and fully expected this to work: ```ts await queryClient.invalidateQueries({ queryKey: scheduleKey }); // I compute the query key in a reusable hook...

Nextjs 16 use cache

Nextjs 16 introduced the 'use cache' directive and i'm trying to use it with trpc. I tried making use of it, but i'm getting an error...
No description

Unauthorized Error while prefetching from protected procedure

I was working on a nextjs monorepo using trpc as backend I am integrating SSE with normal trpc methods, I implemented auth using better auth and it works very smoothly, but when I try to prefetch on server components I get not authenticated user error, but after render the app works without error. I checked further and reached upon conclusion that cookies aren't resolved because when I tried passing headers vis prop drilling from TRPC provider and using those in getting auth it worked and prefetching worked. Here is my problem, any help would be appreciated https://stackoverflow.com/questions/79823260/trpc-prefetching-fails-on-protected-procedure...

With infinite-query, how do I ensure a re-render during status=pending of next-page fetch?

Whether I use the placeholderData option, or my Component's own custom skeletons=<number> prop, the fact is that I get either of those rendered only on the very first fetch (on page load). When fetching a next data page, however, there simply is no rendering happening while .status === 'pending' and so no skeletons/placeholders show on the "Load more..." scenario. Anyone know a solution to this, or an option for this I have somehow missed somewhere?...

Hono tRPC Server body issue

I have been trying to get Cloudflare Workers, Hono and tRPC working for tens of hours now. I am using the @hono/trpc-server package which gives me middleware for trpc to run with hono. They even have an example with cloudflare workers and a d1 database, so I know it is possible to do what I am trying to do. The problem I am having is that tRPC is not reading the body properly, or at all. Take this function as an example: ```ts...

transfer class instances

The AI SDK uses the Chat class as the abstraction that one is supposed to share: https://ai-sdk.dev/cookbook/next/use-shared-chat-context the useChat hook needs the same reference in order to not rerender: https://github.com/vercel/ai/blob/e15b5458f1aaced8ea854823044ea3d125dcaac8/packages/react/src/use-chat.ts#L67 My current soultion is to wrap trpc with a "normal" useQuery...

Next.js/tRPC RootLayout Caching Error

I'm hitting a specific rendering/caching issue in my Next.js (App Router) RootLayout when trying to fetch data via tRPC. 💻 Code Snippet (app/layout.tsx) I am trying to fetch the list of categories server-side within the layout:...

Nextjs SSR

Hey everyone! I’m pretty new to this way of building APIs. Is it possible to use tRPC to create type-safe APIs with Next.js (using React Query + prefetch) while having a separate Node.js backend inside the same monorepo?

authenticatedProcedure

Is it true that for every requests, it is going to call getSession()? If yes, what is a good workaround or this is how everyone is doing?...
No description

trpcClient

Is this way recommended or stable that we can save the trpcClient outside of the provider and access it easily? Like image 2
No description

Type stable "combine" function for "useQueries"

Hey all, im trying to use a https://tanstack.com/query/latest/docs/framework/react/reference/useQueries#combine function to combine the results from multiple queries together. As the documentation says, the combine function should be referentially stable. Im trying to get this typed properly, but getting the proper type for the "result" parameter of the combine function is a little crazy the way I have it working now, see example below....

TRPC type aliasing

I have these two interfaces set up. One manually defined with TS interface and one using the output of a Zod schema ```export interface TestManualInterface { first_name: string; }...
No description
Next