tRPC

T

tRPC

Join the community to ask questions about tRPC and get answers from other members.

Join

Simplifying SSR (e.g. in Next.JS)

I'm just trying to figure out if I'm missing something or if somebody else already tries this but: Wouldn't it be theoretically possible, for SSR, to detect when a useQuery is being SSR (e.g. checking typeof window === 'undefined') and therefore await the fetch call automatically and then pass it to initialData to rehydrate on the client?...

Type mismatch with queryClient prop of @trpc/react-query

Getting the following type-check error: ``` src/providers/query-client.tsx:49:42 - error TS2322: Type 'import("/<...>/node_modules/@tanstack/query-core/build/modern/hydration-CLZ8NKV0", { with: { "resolution-mode": "import" } }).b' is not assignable to type 'import("/<...>/node_modules/@tanstack/query-core/build/modern/hydration-C0fOPJLA").b'. Property '#private' in type 'QueryClient' refers to a different member that cannot be accessed from within type 'QueryClient'. ...

Getting type error for AppRouter

Hey. I've set up trpc in my monorepo as per this repo: https://github.com/t3-oss/create-t3-turbo (other auth provider). I am running in to these two type errors on the AppRouter type and haven't been able to solve them: Type 'CreateRouterInner<RootConfig<{ ctx: { db: NeonHttpDatabase<typeof import("/Users/emilqvarfort/Desktop/Projects/moktiv/code/moktiv/packages/db/src/schema/index")> & { $client: NeonQueryFunction<boolean, boolean>; }; token: string; session: { ...; }; user: { ...; } | undefined; }; meta: object; errorShape: { ...; }; t...' does not satisfy the constraint 'Router<any, any>' The types of '_def._config.transformer' are incompatible between these types....
No description

Cloudflare worker subscriptions/websockets

Does anyone have any experience setting up CF Workers with TRPC supbscriptions, in a way where I can have both subscriptions and mutation/queries at the same time? Also without the use of durable objects.

Prevent client tsc from typechecking the server

Hello, I'm trying to use trpc as documented here, but as soon as I put import type { AppRouter } from "../../src/index.ts"; the tsc for the browser client tries to check the node server and throws errors like ```...

Skew protection Vercel TRPC

Was wondering if I can enable vercel skew protection for trpc. According to docs, adding the dpl query should enable it. ```ts...

Infer TRoot and TProcedure for specific procedures (polymorphism)

Hello! I'm trying to build a custom hook that returns specific procedures of a router: ```tsx "use client"...

use cases

Hey, I only recently got to know trpc in connection with create-t3-app. Now I have the question, can I use it everywhere or is it only possible in connection with web frameworks? Would be very nice if you could enlighten me a bit 🙂...

Why Trpc duplicates `shape` and `data` as duplicated JSON field on errors in `errorFormatter`?

I am using error formater and internally TRPC duplicates the data information in the JSON response. Please see the screenshot
No description

procedure output is "any"

I have a problem with the procedure output type. Procedure input types are all correct, but the output type is "any." The server type is correct, but not on inferRouterClient<AppRouter> I'm using 11.0.0-rc.648 and zod ^3.23.8 ...

Use TRPCClientError.cause in frontend

Hi all, My TRPC route can sometimes fail. Say the error is CartValidationError In the frontend, I want to be able to do: ```...

Inconsistent types for mutation return type

I have a signIn mutation that returns: ``` { accessToken: string;...
No description

Possible to build this custom hook?

Hello! I'm facing a challenge and hope to get some guidance here. I'm building an admin dashboard for creating and editing data - let's just say it's product data. I built a product management form that I want to use for both creating and editing a product, because the fields are the same. ...

Hydration error when using useQuery instead of useSuspenseQuery when prefetching

I have a page ```tsx export const PostsPage = async ({ params }: PostsPageProps) => { trpc.posts.getAll.prefetch({ userId: user.id });...

tRPC 404 in Next.js API Routes

I'm trying to upgrade my Next.js version to 15 and still use tRPC with API route. I'm getting 404 for all trpc api routes. Is anyone else facing the same issue? All the other api routes are working fine. app/api/trpc/[trpc]/route.ts ```ts import { fetchRequestHandler } from "@trpc/server/adapters/fetch";...

Best Monorepo Pattern for Sharing tRPC Logic Across Apps

Hey tRPC community! I'm working on a monorepo with a standalone tRPC server, a React Native app, and a Next.js app. Both frontend apps share a lot of common logic, particularly custom React hooks that wrap tRPC calls. Currently, my proposed solution is to create shared hooks that require a React context providing the tRPC client. This approach allows each app to instantiate its own tRPC client (both based on the same AppRouter) while maintaining shared logic....

Prefetch using Next App router not working with useQuery but works with useSuspenseQuery

1. I'm not using the next adapter 2. I'm using the Next App Router 3. Using useSuspenseQuery works as expected, the query doesnt run onMount because it was prefetched, but it always runs using useQuery My server side page.tsx:...

tRPC Client Bundling `node_modules`

Hey team, I've been having an issue recently where tRPC seems to be bundling a .pnpm and node_modules in @trpc/client. This is causing a lot of errors as I'm not using pnpm: <project>/node_modules/@trpc/client/dist/TRPCClientError.mjs ```js import { _ as _define_property } from './node_modules/.pnpm/@swc_helpers@0.5.13/node_modules/@swc/helpers/esm/_define_property.mjs';...

onSuccess and onError in one time

Hi! I have onError and onSuccess execute in one time

Context parameters in server side calls

Hello, I using trpc 11.0.0-rc.633 and Next.js 15.0.3 and have the following questions: 1. when a createContext() function is defined with the FetchCreateContextFnOptions parameter signature, how do you fill that information out when using server side api calls, for example via createCaller? The example in the docs is inaccurate in that it defines a createContext function to require some parameters:
export const createContext = async (opts: CreateNextContextOptions) => { ... }
export const createContext = async (opts: CreateNextContextOptions) => { ... }
...