tRPC

T

tRPC

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

Join

tRPC 10 Mutations Firing Twice in Deployed Releases Only

We have a newly-upgraded tRPC 10 / ReactQuery 4 app and on two pages on which we have a lot of mutations, the mutations are firing twice on click. This is not happening on other pages of our app. This is not a case of double-click, we are already disabling the buttons on mutation commencement This does not happen in local development; this only happens on Vercel preview deployments / prod deployments....

useQuery with query params

Hi, I'm wondering how to correctly handle query params as a useQuery input using Nextjs. ``` const RecipeDetailPage: NextPageWithLayout = () => { const router = useRouter();...

infiniteQuery always undefined cursor

Hey there ! I'm struggling a bit to understand who the useInfiniteQuery is supposed to work with React. I have a route fetching logs defnied like so: On the server:...

Migrating v9 to v10 - - using the client?

I'm migrating a large project from trpc v9 to v10. There is a section of the code that uses the result of trpc.useContext().client to perform several mutations. For example:
const addMeasurementPromise = client.mutation('measurements.add', { ...data})
const addMeasurementPromise = client.mutation('measurements.add', { ...data})
...

Using tRPC and something else too? For building a mobile app / public API.

A bit noobish, but I'm starting a new project w/ the t3 stack and I'm looking to build a mobile app (the features I want can only be implemented in an app). But of course, tRPC on its own won't be able to handle that. What do yall think the best approach is here? Should I build an express server or similar (in order to tailor the api for the mobile app to improve DX or maybe even create a public API too), or use something like https://github.com/jlalmes/trpc-openapi to add companion REST endpoin...

whats the difference between context and middleware

and which 1 should I use for express session cookies

Axios, ExpressMiddleware and TRPCErrors

We have an express based TRPC server and our procedures are calling our endpoints using axios. So when our users credentials provided expired or are incorrect Axios will return with a 401 as it should. I need to get this UNAUTHORIZED 401 error to the frontend but no matter what I try TRPC throws is as a 500 INTERNAL_SERVER_ERROR. I tried error formatter and on error and I hoped to get the httpStatus code from the axios error somehow but I only get access to the message. Can someone here be so ki...

base path

Hi, don’t seem to be able to find documentation but is there a way to set the base path of the server? Currently I’m routing requests to a lambda that exists on the path /trpc but unless I remove trpc from the request uri, the server errors because trpc path is not part of the routes I’ve setup

Any Benefit using tRPC for only remote api calls?

Hi, does it make sense to use trpc if all I will be doing is calling a remote api? I have set it up succesfully with Azure storage tables, works well passing the table adapters as context. Just figuring out if theres any benefit calling an open Api v3 with trpc, or just stick with react query? Any advise much appreciated. Using Next v13^...

Can I connect to a regular node express with socket.io?

My idea is that I will host the socketio nodejs server in some server, and then use it with my nextjs project, the problem is that I'm not sure if that is capable with TRPC. Where would I interact with the socket? It cannot be through procedures ( I'm assuming ). How would I maintain the open connections, if not instanciating through the createTRPCNext function? I know about the whole https://github.com/trpc/trpc/tree/main/examples/next-prisma-websockets-starter shenanigans, and I tried that way first, but I'm deploying to vercel right now, and as I understood, this would be a blocker and I would need to host the websocket server in another place either way, on the example case, render.com...

how does one actually make trpc/client work with the app router

ive been using trpc on the pages router for a while now and ive started putting together a next13 stack (all the dependencies i like etc) for some of the prototype projects we have. However i cant seem to wrap my head around how trpc would play along with the app router. the api handler seems straightforward, but how to configure the client context? any help appreciated

when i deploy frontend trpc fails to compile

im trying to deploy my create-react-app with tRPC to Vercel it works perfectly fine on localhost...
Solution:
kk i fixed it

how to rate limit in trpc express/nodejs server (not nextjs)

each prodecure will have different rate limit for IP or sometthing idk maybe whole database will have same limit for now if there is no simple solution...

Disable fetch on load

```tsx import React, { useState } from "react"; import { api } from "../utils/api"; const Test = () => {...

is it possible to record the requests on the server side ?

I wanted to play them back then on the browser side . I wanted to do server side rendering in react and I was thinking about sending recorded http requests together with html which will be used later for hydration processes...

Streaming responses (eg. for streaming ai chat completion text)

Hello! Has anyone used Vercel's ai package or any similar libraries which stream their responses with tRPC? I'm wondering what the best way to achieve a streamed response like that is while maintaining type safety. The trouble with useSubscription() is that it behaves more like a query than a mutation, so it would need to be called immediately when the component mounts rather than being triggered by some user action.

Handling errors on the front-end

I'm making a mutation from my front-end and I intentionally throw a new TRPCError on my backend, I can see the trpc error on both client and server console but I don't understand how to catch it in the front-end The mutation onError does nothing, myMutation.isError is false, myMutation.error is null and status "idle" Here's some example code...

TypeScript Alias Imports don't get resolved ont the Client

I have a Monorepo with a multiple /packages/* packages, each has its own tsconfig.json. I noticed that I get type errors on the client side if I use TypeScript alias path imports on the server package. The alias import paths for the server are only defined in the server/tsconfig.json and not in the client/tsconfig.json. If I change the alias imports on the server side to relative imports, it works on the client. It seems like TypeScript cannot follow the imports correctly from client to server, because it doesn't check the server tsconfig. Anyone the same issue?...

merging other routers to appRouter

Hey everyone, I am using the https://icflorescu.github.io/trpc-sveltekit package in my SvelteKit project. My question is not related to that package (at least I don't think it is) I figured I mention it since it might be related and I just don't know... I am wondering if I have this code, ```ts // router/router.ts import type { Context } from '$server/trpc/context';...

Can I get non-redacted INTERNAL_SERVER_ERRORS in production?

I'm trying to debug crashes in production, and having a hard time. As far as I can tell, errors are redacted before they're sent to the onError handler, which is a little surprising: I don't want to send stack traces to the wider internet, of course, but I'd want an internal, server-side-only error handler with the raw errors. Is that possible? Thanks!