tRPC

T

tRPC

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

Join

Next.js/tRPC Prefetch w/ HydrateClient "Error occurred prerendering page"

Hello all, I'm trying to get to the bottom of an issue I'm having using prefetching with HydrateClient. I'm using the t3 stack, so I believe that HydrateClient is a helper function wrapping tRPC helpers.dehydrate()... When I run this code with pnpm dev, it works fine, but when I go to pnpm build, I am getting ``` Error occurred prerendering page "/queue". Read more: https://nextjs.org/docs/messages/prerender-error...
Solution:
I FIXED IT! Stupid mistake, I wasn't marking the root page function that was performing the prefetch as async... i.e: Broken: ```ts export default function QueuePage() {...

Compiling Frontend

In my frontend, I try to import the backend types: - import type { AppRouter } from "../../../lambda/api-handler/src"; however, now my frontend cannot build as it has a different typescript configuration than my backend. What is the intended solution here? Is it possible to import these types without using a single tsconfig/build step across backend and frontend?...

How do I return a plain text in trpc?

I want to return an ‘ok’ directly in the return data, not {result:{data: ‘xxx’}}

is there a definitive solution to the slow language server/compilation issue?

it takes 5-20 seconds to load suggestions in many files in our project.

Pass query as prop with ProcedureUseQuery

I'm trying to pass a query to a component in my client using TypeScript, but ProcedureUseQuery seems to not be exported in @trp/react-query 11.0 (it is defined on src/createTRPCReact.tsx)

How can I set a Cookie from the server (for the login)?

This code is not working.. ``` import { initTRPC } from "@trpc/server"; import { createHTTPServer } from "@trpc/server/adapters/standalone";...
No description

How to get access to the types generated by the server in the frontend (React)?

In this example, how do you replace data: any to the correct type? ``` import { trpc } from "../utils/trpc"; ...

Types not being shared with the frontend

Hello, I am currently trying to follow a guide to setup a new project and encountering this error in the client: ``` Property 'greet' does not exist on type 'TRPCClient<CreateRouterInner<RootConfig<{ ctx: { event: APIGatewayProxyEvent; apiVersion: string; user: string | undefined; }; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { ...; }>>'.ts(2339)...
Solution:
switching to createTRPCProxyClient solved this problem

How can you extract the mutation type signature?

Hi folks, this isn't a major issue and not blocking by any stretch. I was hoping to abstract my mutation callback so that I can keep my router relatively flat. ```...

How to treat mongoose/mongodb ObjectIDs as their serialized string values on the frontend?

Node Environment Version: v20.10.0 Package Manager: PNPM Workspaces Repo Setup: Monorepo/Turborepo Environment: WSL with VSCode ...

Union context type to allow incremental upgrade to App router

Hi there. We have a tRPC API that is currently being served from the NextJS Pages router. We're looking to migrate to the App router, and in the process I am being tasked with finding a way to reuse all of our existing routers/routes. I have the new app-router-router setup and serving requests, and now I'm trying to find a way to hook up to our existing routes. The issue is, the two context objects seem to be incompatible. One has the Pages router Req and Res properties, while the other just has the Req property. Otherwise, the types are exactly the same. I have handling so that all of our middleware works with either context type, yet defining base procedures results in a type error. Is there any way I can rectify this, so that for example, our teamProcedure would work on two different types of context? I've managed to figure everything else out, except for this. Thanks!...
No description

Transform server response on the client before caching

How can I transform the server response on the client before putting it in the cache? Is it necessary to use a vanilla client or is there a way to do it while using the tanstack query integration?

TypeError: Cannot read property 'useState' of null

I followed the documentation to use @trpc/client in react. I am using Expo React Native and Expo App Router here is the provider ```tsx import { QueryClient, QueryClientProvider } from "@tanstack/react-query";...
Solution:
Downgrade to latest versions not "next" versions. But mainly the mistake was that it is a monorepo so the packages were being installed twice .. once in the package folder and one in the root and I was mixing things up

Procedure shows as `any` unless it's a mutation

Hey 👋 I'm trying to create a small monorepo FE/BE project in which I'm trying tRPC for the first time as it looks like a really cool way of building and consuming APIs. To give a bit of context, I got a separate API server using Hono, and a fresh create-next-app in which I initialised tRPC....

[TRPCClientError: opts.signal?.throwIfAborted is not a function (it is undefined)]

It's a react native app trpc v11 which works until I deleted node_modules, ran yarn install and started getting this error.

failed to parse json

calling the trpc query fails because of failed to parse JSON. this is what im calling internalApi.user.getUserById.query(); ive trying logging the incoming call in the server but the request doesnt even seem to reach the server...
Solution:
next auth was filtering the endpoint
No description

default TRPCError, try/catch & dealing with DatabaseErrors

Hi there! I'm quite new to tRPC and was hoping that someone could help me out with some general questions related to errors and errorhandling. Thanks in advance! ...

Express.JS and tRPC

guys kindly what are the differences between tRPC and express, I think they do the same work, isn't?

performance profiling tool for Trpc

I used to develop in django and there used to be cprofile or gprof2dot to profile apis, is there a similar tool for trpc?

TRPCClientError: Unable to transform response from server

I'm having a problem with tRPC Client, I'm using TurboRepo, I created the API with Fastify, TypeScript and tRPC for the backend. For the frontend, I'm using Next.JS, TypeScript and tRPC. It works, the cookies are being set, but it is always returning this error: "TRPCClientError: Unable to transform response from server".