tRPC

T

tRPC

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

Join

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

zustand empty on inital render

Hello, I am currently using nextjs, trpc and zustand. I'm running into a problem where my zustand state is undefined on reacts inital render of the page. - I use trpc's prefetch function is a layout.tsx file to fetch data on the server, the data here is used on all routes within my /dashboard directory (this data is mainly for my dashboard sidebar...
No description

Zod v4 Issues with inferred typeof appRouter

Here is the full error message: src/routers/_app.ts:13:14 - error TS2742: The inferred type of 'appRouter' cannot be named without a reference to '../../node_modules/zod/v4/core/util.cjs'. This is likely not portable. A type annotation is necessary. - I am in a turborepo with a separate frontend and backend apps. ...

createTRPCOptionsProxy needs a queryClient?

Trying to understand why createTRPCOptionsProxy needs a queryClientgiven that it's then used inside of useQuery, which in turn will get the client from useQueryClient? What would happen if the two queryClients don't match?

what's the correct way of reporting unhandled errors to Datadog (or similar services)?

I tried multiple things to make sure that Datadog sees the actual error being thrown, but no matter what I did, the error is always the same (screenshot attached). This is my current logger (it was much simpler before, but I tried to recursively find the cause error with no luck). ```ts...
No description

How do I add a Websocket server to a normal tRPC HTTP server for realtime events?

I have a project that contains the following: - Express API using TRPC - CapacitorJS mobile app using SolidJS - PWA app using SolidJS ...

Is it possible to use trpc client in a shared monorepo package?

My pnpm monorepo setup: - API (express) - packages/shared (shared code) - web (nextjs) - app (react native)...
No description

Struggling to refactor into sub-routers

Howdy. I'm struggling to refactor the creation of a sub-router into a function that is independent of the server instance. ```typescript import { publicProcedure, router } from "./trpc.ts"; import { actorRepo } from "../../../Domain/Actor/Persistence/Drizzle/SQLite/ActorDrizzleSQLiteRepository.ts";...

How to map internal errors to TRPCError types?

Hi, my application is throwing it's own set of custom Errors. Unfortunatelly tRPC always catch this errors and represent them as UNEXPECTED_SERVER_ERROR type. I tried following:...

Keep subscription `.data` after stopping (Tanstack Query)

It looks like mySubscription.data is undefined after the subscription stops from the server side (returning from generator function). Can I keep this data without introducing my own useState and leverage Tanstack Query instead? I'm using the old React Query integration because there's no documentation for the new integration for subscriptions (i.e. useSubscription(trpc.mySub.useOptions()) )....

How to compress procedure response

I have one trpc procedure which has 40 mb response. I would like to compress this. How can I compress one procedure call in trpc. Or even better have compression for all trpc procedures above some threshold. Is it possible or I have to create separate api endpoint out of trpc context. I’m using nextjs with custom express server....

Next js Pages Router, TRPC

Has anyone succesfully set up next js pages router and trpc?

A cleaner web experience for this forum

Hey! I saw this forum uses AnswerOverflow to sync Discord threads to the web. I’m building Paladin, a smoother, cleaner alternative that makes Discord forums easier to browse on the web. It’s free to use and can run alongside AnswerOverflow, so you don’t have to switch anything to try it out. If it’s helpful, I can spin up a version of Paladin on your forum so you can see how it looks for your community. Is there anything about your current setup you’d like improved? I’d love to see if Paladin can help. 😀 Example Paladin preview attached...
No description

useInfiniteQuery: `hasNextPage` does not seem to consider fewer-results-received-than-`limit`-given

What's the recommended practice for hasNextPage to correctly be false when the records received were more than 0 but fewer than the limit prop (that's next to the cursor prop at the endpoint)? To clarify the problem to solve: right now my limit is 11 and queries with 0 results correctly result in a hasNextPage of false, but queries with 1 or 2 results seem to have it true. How do y'all typically tackle this subtlety?...

BUG: useSuspenseQuery does not forward TRPC options to context

When using useSuspenseQuery, the TRPC options are not forwarded to the context: export const createTRPCContext = cache( async (opts?: FetchCreateContextFnOptions) => { // opts is undefined when called from a useSuspenseQuery...

Recommended setup for tRPC + Tanstack Query Subscriptions

Hey there, I am already aware that there is a package for this: import { useSubscription } from "@trpc/tanstack-react-query";...

creating middleware with context type as param

i'm looking into build a "post operation" function into separate piece of code. i know it may be done differently but i'm looking into it for code structure purpose. the goal of the middleware is to accept a function which takes the current context as input, as well as the result from the handler, and execute code. ```ts import type { MiddlewareResult } from '@trpc/server' import { initTRPC } from '@trpc/server'...

How to handle 500s from prefetching

I'm using nextjs app router. I'm having an issue where I prefetch using something like the following in a server component: Server ``` void trpc.projects.getProject.prefetch({...
No description
Next