tRPC

T

tRPC

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

Join

throw custom error

I use @trpc/client as the backbone of a backend. This backend throws custom exceptions based on httpexception. How can I customize exceptions throw in the client? ``` const client = createTRPCClient<RegistrationAppRouter>({ links: [...

Automatically decode custom errors on client

Hi! We're using tRPC v10.45.2 with React Query in a Next.js app. I'm looking for a nice way to pass custom error payloads to the browser. What I've done so far is have something like this: ``` export type MyAppErrorDetails = { $type: 'ILL_FORMED_BANANA'; shape: BananaShape; } | { $type: 'NOT_HUNGRY' }; export class MyAppError extends TRPCError {...

Infer query type of `data`

Using trpc version 11, how can I infer data? ``` const { isLoading, isError, error, data } = trpc.patient.list.useQuery();...

Streaming is not working

Hi, I've set up unstable_httpBatchStreamLink in my app but the streaming is not working. The batching occurs, but nothing is streamed back from the server. It looks like the request still resolves after the slowest request has been sent. Can anyone help me troubleshoot this? I'm using a Fastify server.

How to opt out of caching an API in trpc NEXT/SSR?

I faced an issue where all the data's being fetched from my server component are not the latest, they seem to be the latest on dev, but not on production. I have tried to set a header in the responsemeta and also tried to add a stale time of 0 , below are the screenshots for the server...
No description

How to get pageParam from useInfiniteQuery()?

How would I write a tRPC call equivalent to this traditional useInfiniteQuery? My primary concern here is that I need to pass in a cursor to my procedure, and upon each successive query I need to update this cursor for the next call. ```TypeScript const { data: posts,...

NextJS App Routers with tRPC: can't call query on server component

Hi all, I'm folloing this guidline to setup nextjs with tRPC but it didn't work when I call the query on server componet: https://trpc.io/docs/client/react/server-components#getting-data-in-a-server-component ...

Using duplex stream as transport?

I'm using a framework that gives me a node duplex stream for communication between front and back end. Can I somehow wrap that stream with tRPC?

How to get line number in errors?

Hi, we are currently doing this: ```ts onError: (info) => { if (isEnv("local")) { console.error(...

Auth in context is initially null leading to TRPCClientError: UNAUTHORIZED

im trying to get some images in my server component using a protected procedure ``` import { api } from '@/app/_trpc/server'; import Images from '@/components/images'; ...

Background tasks

Hi, how to return response and do some background tasks. Like this ```js app.get('/', (req, res) => { res.on('finish', () => {...

edge runtime config router specific

does the edge config have to be in app/api/trpc/[trpc]/route.ts? is it possible to have it only for a specific route?...

[V11] BFF Monorepo setup

Hello! I have a monorepo with several apps, every app has its tRPC endpoint setup like this. ```typescript // app/api/trpc/[trpc].ts...

Is there any way to know which objects in a list got updated from a useQuery refetch 🤔

Or through another API type Have some larger calculations that happen after the list is set that I don’t want to recalculate...

[v11] Change responseMeta in procedure

Is there a way to do so? I need to add a cache header to one specific api. I found this doc quite confused me. I don't have createTRPCNext in my app (mine is app rotuer created from t3 template). And this seems a global caching rather than a single api route one. Thank you in advanced....

Caching API calls (HTTP response)

I'm using tRPC with Analog.js, I'm wondering if this is possible to be implemented. Where I could cache API calls, and clear cache on certain conditions (non-get request).

TextDecoder not implemented Trpc react-native httpBatchStreamLink

Receiving the stream relies on the TextDecoder and TextDecoderStream APIs, which is not available in React Native. If you still want to enable streaming, you need to polyfill those. any refrence to this?

Generating Types in v11

I am trying to generate types with tsc --declaration in order to import the type for the app router into a different project. Is this use case supported in v11? the app router changes to any type after upgrading, and the declaration files reference these "do-not-import" files

Good patterns for large list querys? Invalidation & refetching gets slow after a mutation

We have several large lists where we invalidate the query after editing an item. What are some good patterns for this? The network lag starts adding up for the customers with more data. Ironically those who use us the most 😄 Is it "good practice" to edit the list query cache directly in the mutation onSuccess? Or necessary to refactor the list querys to be smaller, through server filters or infiniteQuery? Especially painful in a view where we have two lists where the user can connect items from one list to the items in the other list. Requiring both list queries to be invalidated. Better to make the "connections" mapping its own api procedure and only invalidate that? Or combine all three to one query, set the cache state manualle in the mutation onSuccess? ...

TSC errors after upgrading to v11

Hello, I am trying to upgrade to v11 and encountering the following error: ``` tsc --declaration --emitDeclarationOnly ...
Solution:
fixed by adding the "DOM" lib to my TS config