#❓-help - tRPC

v2812/14/25, 7:37 AM

Hello,

I am wondering if it is possible to properly type my "cause.code"? I am hoping to create custom error codes so my frontend can decide which type of UI to display to the user. But, ideally this would be in a typesafe way so im not guessing what the error codes are. Is there a way i can tell trpc this, without having to use

as CustomErrorCodes

as CustomErrorCodes

in every instance I want to use it in?

client:

    const { error: invalidCaptcha } = await tryCatch(
        api.verification.isCaptchaValid({ guildId, uuid }),
    );

    console.log(invalidCaptcha?.cause?.code); // Property code does not exist on type {}.

    const { error: invalidCaptcha } = await tryCatch(
        api.verification.isCaptchaValid({ guildId, uuid }),
    );

    console.log(invalidCaptcha?.cause?.code); // Property code does not exist on type {}.

server:

            if (!verificationCache) {
                throw new TRPCError({
                    code: "BAD_REQUEST",
                    message:
                        "This captcha has expired.",
                    cause: {
                        code: "CAPTCHA_EXPIRED",
                    },
                });
            }

            if (!verificationCache) {
                throw new TRPCError({
                    code: "BAD_REQUEST",
                    message:
                        "This captcha has expired.",
                    cause: {
                        code: "CAPTCHA_EXPIRED",
                    },
                });
            }

trpc-to-openapi

Ali Samadi12/13/25, 4:55 AM

is this package stable to be used for production?

https://github.com/mcampa/trpc-to-openapi?tab=readme-ov-file

GitHub

GitHub - mcampa/trpc-to-openapi: OpenAPI support for tRPC 🧩

OpenAPI support for tRPC

. Contribute to mcampa/trpc-to-openapi development by creating an account on GitHub.

trpc with deno + hono + supabase edge functions

Rob Schilder12/7/25, 4:51 PM

Hey guys,

I wanted to add tRPC alongside our existing Hono setup
using the official

@hono/trpc-server

@hono/trpc-server

adapter.

tRPC's type-safe client requires importing

AppRouter

AppRouter

from the server:

import type { AppRouter } from "../server/trpc"
const trpc = createTRPCReact<AppRouter>()

import type { AppRouter } from "../server/trpc"
const trpc = createTRPCReact<AppRouter>()

Our server uses Deno-style imports (

#report/repository/compose.ts

#report/repository/compose.ts

) that Node.js TypeScript can't resolve. When the frontend tries to infer types from

AppRouter

AppRouter

, compilation fails.

Can any of you confirm whether it's possible to use Deno + tRPC in this way and it's a setup fault on our side? Or is this not possible?

offline mode (expo app)

ervi12/2/25, 6:18 PM

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

Ali Samadi12/2/25, 4:45 PM

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

Using react server components with separate API

Arxk12/1/25, 6:43 PM

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

Set up with React Server Components | tRPC

These are the docs for our 'Classic' React Query integration, which (while still supported) is not the recommended way to start new tRPC projects with TanStack React Query. We recommend using the new TanStack React Query Integration instead.

Expo and nextjs TRPC issue

Holden9212/1/25, 1:13 PM

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]

I am certain that the versions match between the client and server. I am using superjson as my transformer. I have strict:true in my tsconfig.

It works fine in my nextjs backend and frontend, but not between nextjs and react-native.

Trpc version: 11.7.2

What more information might you need?

Can we use trpc route inside another trpc route?

Ali Samadi11/28/25, 2:21 AM

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?

Solved

onethread11/24/25, 4:49 PM

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

queryClient.prefetchInfiniteQuery

. I noticed there's no

infiniteQueryOptions

infiniteQueryOptions

alternative to

queryOptions

queryOptions

trpc.{aRouter}.{procedure}

trpc.{aRouter}.{procedure}

, so I'm assuming I have to configure

queryOptions

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

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)

 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)

When I try to supply those fields in

queryOptions({...}, {getNextPageParam, initialPageParam})

queryOptions({...}, {getNextPageParam, initialPageParam})

I then get

Object literal may only specify known properties, and 'getNextPageParam' does not exist in type 'UndefinedTRPCQueryOptionsIn

Object literal may only specify known properties, and 'getNextPageParam' does not exist in type 'UndefinedTRPCQueryOptionsIn

react-native crashes with trpc > 11.3.0

Freddy11/24/25, 3:02 PM

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"

"@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)
_unstableCoreDoNotImport.createRecursiveProxy is not a function (it is undefined), js engine: hermes
Error: Couldn't find a 'component', 'getComponent' or 'children' prop for the screen 'App'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing.

_unstableCoreDoNotImport.createRecursiveProxy is not a function (it is undefined)
_unstableCoreDoNotImport.createRecursiveProxy is not a function (it is undefined), js engine: hermes
Error: Couldn't find a 'component', 'getComponent' or 'children' prop for the screen 'App'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing.

Using 11.3.1 works just fine, 11.4.0 and newer does not. I figured this out some time ago and waited a bit if it would be resolved by chance

Any help on solving or debugging the issue or guidance on what info is needed to help would be highly appreciated

Invalidating Queries

Liam11/24/25, 11:40 AM

Hey! Might be being thick here but I'm implementing in an optimistic update layer and fully expected this to work:

await queryClient.invalidateQueries({ queryKey: scheduleKey });

// I compute the query key in a reusable hook
function useScheduleQueryKey() {
  const api = useTRPC();
  const [weekStart] = useScheduleParams();

  return api.schedule.getWeek.queryKey({ weekStart });
}

await queryClient.invalidateQueries({ queryKey: scheduleKey });

// I compute the query key in a reusable hook
function useScheduleQueryKey() {
  const api = useTRPC();
  const [weekStart] = useScheduleParams();

  return api.schedule.getWeek.queryKey({ weekStart });
}

However that won't work. You can make it work by either removing the input - so

getWeek.queryKey()

getWeek.queryKey()

or by passing the key as the only arg;

queryClient.invalidateQueries(queryKey) // Have a feeling this only works becuase it seems to just invalidate any active query so this is likely a red herring

queryClient.invalidateQueries(queryKey) // Have a feeling this only works becuase it seems to just invalidate any active query so this is likely a red herring

Is there a way I can just invalidate the query based on input or am I thinking about this wrong?

The query key is correct as I can use

setQueryData

setQueryData

on it fine;

    queryClient.setQueryData(scheduleKey, onMutateResult.currentData);

    queryClient.setQueryData(scheduleKey, onMutateResult.currentData);

Nextjs 16 use cache

Vilian11/24/25, 4:40 AM

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

Unauthorized Error while prefetching from protected procedure

RodeoSprite11/21/25, 5:30 PM

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

migrated to trpc 11, pageprops not available after client side navigation

Ch1nmaya11/21/25, 4:17 PM

Before:
NextJs v14 pages router
Trpc v10

Now
NextJS v16 pages router
TRPC v11

PageProps are available when page is refreshed
Not available after user navigates via Link

One thing I noticed was that post client side navigation using Link component :
before ->

the /_next/data/.../abc.json

the /_next/data/.../abc.json

returned application/json type response
Now -> it returns text/html type response

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

dSignPhil11/20/25, 8:42 AM

Whether I use the

placeholderData

placeholderData

option, or my Component's own custom

skeletons=<number>

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'

.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

Vessbon11/15/25, 5:36 PM

I have been trying to get Cloudflare Workers, Hono and tRPC working for tens of hours now.
I am using the

@hono/trpc-server

@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:

create: publicProcedure
    .input(z.object({ title: z.string() }))
    .mutation(async ({ ctx, input }) => {
      console.error(input);
      const quest = await ctx.db
        .insertInto("quest")
        .values(input)
        .returningAll()
        .executeTakeFirst();
      return quest;
    }),

create: publicProcedure
    .input(z.object({ title: z.string() }))
    .mutation(async ({ ctx, input }) => {
      console.error(input);
      const quest = await ctx.db
        .insertInto("quest")
        .values(input)
        .returningAll()
        .executeTakeFirst();
      return quest;
    }),

It never even gets to the mutation part at all because validation fails. Using errorFormatting with tRPC shows me that input is undefined when getting passed by postman, which is weird because I am definitely sending a title. It all worked before when I hadn't moved to Cloudflare Workers and before I was using the hono trpc-server package.

This is how I serve the app:

const app = new Hono<{ Bindings: Bindings }>();

app.use(
  "/trpc/*",
  trpcServer({
    router: appRouter,
    createContext: (_, c) => createContext(c),
  }),
);

app.use(
  "/*",
  cors({
    origin: "http://localhost:5173",
    credentials: true,
  }),
);

export default app;

const app = new Hono<{ Bindings: Bindings }>();

app.use(
  "/trpc/*",
  trpcServer({
    router: appRouter,
    createContext: (_, c) => createContext(c),
  }),
);

app.use(
  "/*",
  cors({
    origin: "http://localhost:5173",
    credentials: true,
  }),
);

export default app;

Here is some more context so you can understand my code a little better.

context.ts

context.ts

import { createDb } from "./db";
import type { Bindings } from "./types";
import type { Context as HonoContext } from "hono";

export const createContext = (c: HonoContext<{ Bindings: Bindings }>) => ({
  db: createDb(c.env.questboard),
});

export type Context = Awaited<ReturnType<typeof createContext>>;

import { createDb } from "./db";
import type { Bindings } from "./types";
import type { Context as HonoContext } from "hono";

export const createContext = (c: HonoContext<{ Bindings: Bindings }>) => ({
  db: createDb(c.env.questboard),
});

export type Context = Awaited<ReturnType<typeof createContext>>;

How can I get tRPC to start recognizing the input? The context and database queries work as intended, it's just the input that is not working.

transfer class instances

Brainlaq11/12/25, 11:24 AM

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

export function useChatInstanceQuery(chatId?: string) {
  const trpc = useTRPC();
  const getToken = useGetToken();
  const queryClient = useQueryClient();

  const query = useQuery({
    queryKey: ["chats", chatId],
    staleTime: Infinity,
    queryFn: chatId
      ? async () => {
          const messages = await queryClient.fetchQuery(
            trpc.getChatHistory.queryOptions({ chatId }),
          );

          const chat = createChat({ chatId, getToken, messages });
          return chat;
        }
      : skipToken,
  });
  return query;
}

export function useChatInstanceQuery(chatId?: string) {
  const trpc = useTRPC();
  const getToken = useGetToken();
  const queryClient = useQueryClient();

  const query = useQuery({
    queryKey: ["chats", chatId],
    staleTime: Infinity,
    queryFn: chatId
      ? async () => {
          const messages = await queryClient.fetchQuery(
            trpc.getChatHistory.queryOptions({ chatId }),
          );

          const chat = createChat({ chatId, getToken, messages });
          return chat;
        }
      : skipToken,
  });
  return query;
}

Is there another (better?) way?

i thought about adding conditional logic in the transformer that checks for

`instanceof Chat

`instanceof Chat

on the backend I am unsure how to do this client side and if this a good approach in generel.

Share useChat State Across Components

Learn how to share a chat instance across multiple components with useChat and easily reset the chat.

GitHub

ai/packages/react/src/use-chat.ts at e15b5458f1aaced8ea854823044ea3...

The AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents - vercel/ai

Next.js/tRPC RootLayout Caching Error

oimmi11/11/25, 1:19 AM

I'm hitting a specific rendering/caching issue in my Next.js (App Router) RootLayout
RootLayout
when trying to fetch data via tRPC.

Code Snippet (

app/layout.tsx

app/layout.tsx

)

I am trying to fetch the list of categories server-side within the layout:

import { TRPCReactProvider } from "@/trpc/react";
import { api } from "@/trpc/server";

export default async function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  // This line seems to be the source of the uncached access
  const categories = await api.product.category.public_getAll();

  return (
    <html lang="en" className={`${geist.variable}`}>
      <body>
        <TRPCReactProvider>
          {/* ... layout content using categories ... */}
          {children}
        </TRPCReactProvider>
      </body>
    </html>
  );
}

import { TRPCReactProvider } from "@/trpc/react";
import { api } from "@/trpc/server";

export default async function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  // This line seems to be the source of the uncached access
  const categories = await api.product.category.public_getAll();

  return (
    <html lang="en" className={`${geist.variable}`}>
      <body>
        <TRPCReactProvider>
          {/* ... layout content using categories ... */}
          {children}
        </TRPCReactProvider>
      </body>
    </html>
  );
}

The Error

I am getting the following critical error, which points to something in the tRPC context creation:

Error: Route "/": Uncached data was accessed outside of <Suspense>. This delays the entire page from rendering, resulting in a slow user experience.
Learn more: https://nextjs.org/docs/messages/blocking-route

The traceback points to the

headers()

headers()

call within my

createContext

createContext

function in

src/trpc/server.ts

src/trpc/server.ts

15 | const createContext = cache(async () => {
> 16 |   const heads = new Headers(await headers()); // <- Error points here
     |                                             ^
17 |   heads.set("x-trpc-source", "rsc");

15 | const createContext = cache(async () => {
> 16 |   const heads = new Headers(await headers()); // <- Error points here
     |                                             ^
17 |   heads.set("x-trpc-source", "rsc");

Any advice on how to properly integrate tRPC server-side data fetching in the Next.js App Router root layout would be massively.

Nextjs SSR

Jack Delamou11/6/25, 2:40 PM

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

Ali Samadi11/2/25, 5:29 PM

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?

const { error: invalidCaptcha } = await tryCatch( api.verification.isCaptchaValid({ guildId, uuid }), ); console.log(invalidCaptcha?.cause?.code); // Property code does not exist on type {}.

if (!verificationCache) { throw new TRPCError({ code: "BAD_REQUEST", message: "This captcha has expired.", cause: { code: "CAPTCHA_EXPIRED", }, }); }

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)

_unstableCoreDoNotImport.createRecursiveProxy is not a function (it is undefined) _unstableCoreDoNotImport.createRecursiveProxy is not a function (it is undefined), js engine: hermes Error: Couldn't find a 'component', 'getComponent' or 'children' prop for the screen 'App'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing.

await queryClient.invalidateQueries({ queryKey: scheduleKey }); // I compute the query key in a reusable hook function useScheduleQueryKey() { const api = useTRPC(); const [weekStart] = useScheduleParams(); return api.schedule.getWeek.queryKey({ weekStart }); }

create: publicProcedure .input(z.object({ title: z.string() })) .mutation(async ({ ctx, input }) => { console.error(input); const quest = await ctx.db .insertInto("quest") .values(input) .returningAll() .executeTakeFirst(); return quest; }),

const app = new Hono<{ Bindings: Bindings }>(); app.use( "/trpc/*", trpcServer({ router: appRouter, createContext: (_, c) => createContext(c), }), ); app.use( "/*", cors({ origin: "http://localhost:5173", credentials: true, }), ); export default app;

import { createDb } from "./db"; import type { Bindings } from "./types"; import type { Context as HonoContext } from "hono"; export const createContext = (c: HonoContext<{ Bindings: Bindings }>) => ({ db: createDb(c.env.questboard), }); export type Context = Awaited<ReturnType<typeof createContext>>;

export function useChatInstanceQuery(chatId?: string) { const trpc = useTRPC(); const getToken = useGetToken(); const queryClient = useQueryClient(); const query = useQuery({ queryKey: ["chats", chatId], staleTime: Infinity, queryFn: chatId ? async () => { const messages = await queryClient.fetchQuery( trpc.getChatHistory.queryOptions({ chatId }), ); const chat = createChat({ chatId, getToken, messages }); return chat; } : skipToken, }); return query; }

import { TRPCReactProvider } from "@/trpc/react"; import { api } from "@/trpc/server"; export default async function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { // This line seems to be the source of the uncached access const categories = await api.product.category.public_getAll(); return ( <html lang="en" className={`${geist.variable}`}> <body> <TRPCReactProvider> {/* ... layout content using categories ... */} {children} </TRPCReactProvider> </body> </html> ); }

15 | const createContext = cache(async () => { > 16 | const heads = new Headers(await headers()); // <- Error points here | ^ 17 | heads.set("x-trpc-source", "rsc");

tRPC

Code Snippet (
`app/layout.tsx`
`app/layout.tsx`
)

The Error

Code Snippet (
`app/layout.tsx`
`app/layout.tsx`
)

The Error

tRPC

Code Snippet (app/layout.tsxapp/layout.tsx)

The Error

Code Snippet (app/layout.tsxapp/layout.tsx)

The Error

Code Snippet (
`app/layout.tsx`
`app/layout.tsx`
)

Code Snippet (
`app/layout.tsx`
`app/layout.tsx`
)