tRPC

T

tRPC

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

Join

Can't get type inference from createTRPCNext instance

Hi everyone, I have separate FE and BE using tRPC to communicate, in a monorepo environment. The FE app is a simple Next.js app, the BE is tRPC with Express. I'm using Bun as the runtime. I'm exporting AppRouter from the BE as per the instructions, and importing the type in the FE and passing it as a type argument to createTRPCNext. When inspecting createTRPCNext in the FE, I can see the type has resolved and the procedures are in there....

Not able to seed react query cache

I was reading this blog post from the react-query dev: https://tkdodo.eu/blog/seeding-the-query-cache#seeding-details-from-lists And trying to follow the "push approach" here for seeding the react query cache but adapting it to @trpc/react-query Here is the code I wrote. ```ts...

What is wrong with my subscription setup?

Hi, I'm new to trpc and while playing with subscriptions for some reason I can't make it work. In this gist (https://gist.github.com/odiel/f4d3d09650fd1598ea29f6750e76841a) I have the server and client setup. I'm using the latest Deno version and "@trpc/server": "npm:@trpc/server@^11.0.0-rc.638", "@trpc/client": "npm:@trpc/client@^11.0.0-rc.638",. Once running the client it stays in, and I don't get to see any of the events emitted on the backend reaching the client. What am I doing wrong? ``` << subscription #1 example { input: undefined,...

Make server side tRPC calls on an external tRPC server ?

Hello, there is a very valid discussion on github that has still not been discussed : https://github.com/trpc/trpc/discussions/5989

Building CLI tool for trpc for type generation

I'm building trpc types cli tool for my use case. i use nextjs for api and i want to implement same functionality in another nextjs app without copy pasting whole api folder to that one, i already made type generation tool just testing around if it will work this is what main nextjs api /api/trpc/[trpc]/route.ts code looks like, im allowing to bypass cors issue when making request from another nextjs app in my case localhost:3000 is main and localhost:3001 is second ```js import { fetchRequestHandler } from "@trpc/server/adapters/fetch";...

tRPC mutation finishes early

Hi everybody, I'm currently trying to use a tRPC mutation I wrote to log in to supabase. After some trial and error I found out that my defined mutation somehow finishes early, meaning it doesn't wait for any awaits to finish and also does not respect the output of the function, which means the body of the tRPC mutation is always empty. ```ts export const authRouter = createTRPCRouter({...

tRPC prevents me from using revalidatePath to invalidate cache on the client

It still invalidates the cache on the server side(so on forced refresh it is shown), but doesn't invalidate the cache on my ssr rendered pages/layouts. this causes my users to be stuck and see stale data this persists for SSR rendered pages that don't use trpc, and for when using them with a query from trpc that is being manually revalidated with trpc utils I tried using trpc 11, also tried moving to 10.45 (latest stable) and it persists I tried workarounds, couldn't find a way to make this happen...

tRPC Query Invalidation Issue with Client-Side Data Fetching and Initial Data from server component

I’m fetching data using tRPC and passing it to a client component as initial data. The client component then re-fetches the exact same data using tRPC with this initial data as the basis. However, the search field doesn’t seem to invalidate the query properly. Why might this be happening, and how can I ensure the query invalidates as expected? This is the Server Component code ```tsx import { api } from '@/server/trpc/server';...

How can I automatically use react's cache with tRPC on server side?

I have this in my repo: ```ts import { cache } from "react"; import { headers } from "next/headers";...

Dockerized Next.JS Error [TRPCClientError] INTERNAL_SERVER_ERROR

Env: Docker | Node 22 | Next.JS | pnpm Everything works fine outside of docker, I can create the build and start it in the same way, but it seems to break when run inside docker ```...
Solution:
after some futher digging it might be a db issue, that being said is there any way to get more verbose logs out of these trpc endpoints?

What is tRPC, when and where should I use it?

I recently came across tRPC while learning TypeScript and Zod. How, Where and When should I use it?

Next15 (app router) + ReactQuery, tRPC multiple backends

Hi, I need to use multiple trpc microservices connected to single NextJs15 App. Everything works fine with single trpc reactClient, but multiple trpc React Query clients overlaps and use URL of 'bottom' trpc provider. Am I wrong with this code? Sample code `// _providers/trpc-provider.tsx ...

What are the benefits of adding db to context rather than importing it directly in the router?

As per title, the docs and most examples I've seen using TRPC put the database into context as follows, ``` import db from "../db"; export const createContext = async (opts: CreateNextContextOptions) => { ...

Calling Express `request.send` inside tRPC middleware/procedures

Hello 👋! I've been trying to introduce tRPC to our existing express codebase and I was wondering if it's possible to invoke express request.send inside my tRPC middleware or procedures. I want to avoid rewriting our entire auth layer which is unfortunately deeply coupled with the express request/response objects, and instead just call our existing express middleware functions. However I want to make sure doing so isn't going to cause any memory leaks or hanging promises or anything which could silently brick the whole server. Will the tRPC handler return or exit gracefully if the request is closed? Has anyone had experience with this? example:...
Solution:
@Alex / KATT 🐱: You can pass a fake res-object to await runJWTValidations(req, res) Example that probably needs some modification: ```ts const mockRes = {...

Extending "Meta" with downstream concat usage?

Is there a way to extend the meta when using concat and creating plugins and middleware? e.g having a plugin called permission and then requiring the meta data to extend the existing base Meta to contain a new required field e.g permission In my attempts I've just been getting "meta mismatch"...

following the trpc 11 guide on app router fails with dynamicIO on nextJS

When using trpc with nextjs@15.0.3-canary.4 with dynamicIO enabled I get the following error when trying to create a query client. Error: Route "/" used Date.now() instead of using performance or without explicitly calling await connection() beforehand. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time at io (node_modules/next/src/server/node-environment-extensions/utils.tsx:33:31) at now (node_modules/next/src/server/node-environment-extensions/date.tsx:17:9)...

Fetch once and never again?

Hey there 👋, I'm wanting to fetch some data reactionTypes once when my layout <MainLayout /> renders in Nextjs and never again because this data does not change. Currently, I have placed (what I think is) a headless component into my layout that accesses the query client then sets a staleTime: Infinity default on this specific query. Is this a dumb strategy? How might you do this differently? ```TSX...

Unsafe assignment of an error typed value

Hey guys, I'm new to tRPC so it's probably a newbie question I've a simple route creation, which I'm trying to add more methods to it but eslint is always warning about any other route I create: ```tsx import { z } from 'zod' ...
No description

Correct way to fetch trpc data on SSR and CSR

Hello, I am currently using trpc in my nextjs app router project and I am wondering what the best way of using trpc is with a mixture of SSR and CSR. The issue I'm having is that because I'm fetching the data on the server, it also fetches on the client which menas I'm making a request needlessly, and I'm not sure what the best way of dealing with this is....
Next