tRPC

T

tRPC

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

Join

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!

Error handling: Zod errors and manually thrown TRPCErrors have different shape

If zod validation fails, the client-side error.message contains a JSON encoded array of errors, but if a TRPCError is thrown in a procedure, error.message is simply the error message. Why do they have a different shape? How should I go about this? Should I try to standardize both to a JSON encoded array on the server? Or should I try to distinguish the two scenarios on the client-side?...

prefetch() within getServerSideProps does not provide data upon manual refreshing

Within getServerSideProps: await ssh.user.getDepositInfo.prefetch(userId); await ssh.user.getFQOperationHistory.prefetch(userId); ...

How to modify existing cache data?

I have a message queue being fetched with InfiniteQuery requests. When adding a new message, I want to prevent client-reload by adding the message to the front of the existing messages array. Is the tool for this setInfiniteData() ? When I return a modified version of the existing cache-data, TS throws errors about the [cachedData] being recursively incorrectly formatted no matter what I do 😠! Q1: This is way outside my league but I noticed this: Is there possibly an error in the [react-query] TS-definition at https://github.com/trpc/trpc/blob/main/packages/react-query/src/shared/proxy/utilsProxy.ts lines 155+156 because they are duplicates. ...

When using createServerSideHelpers can the context be typed as GetServerSidePropsContext?

I assume the reason we should recreate the context when using createServerSideHelpers is because the req, res we get from GetServerSidePropsContext are not typed the same as the ones we get from NextApiRequest and NextApiResponse. Fair enough. but can I create create my context based on the ctx we get from GetServerSidePropsContext? If that the case is it a good approach to extend the InnerContext from the union of the both Partial contexts, and by "both" I mean the context we are expected to get and work with when calling our routers from the next API handler and from getServerSideProps? ...

Query data is undefined for a bit and is then populated. How to use with React State?

I have an asychronous submit function that's called upon a button press. It refetches the query with the new values and then uses setProductResponse to set the values... if query.data is truthy, which is almost never is unless I spam the button. I know what the problem is and I've ran into this into the past, but I forgot what's the best way to deal with it. The query data is undefined for a short bit while the data is actually being fetched, so I need to set the state afterwards, but I'm not exactly sure how to do so. I thought .then would resolve it, but it didn't. Any help would be much appreciated! Here's my code: ```ts...

should we use tRPC for handling form submittion or not?

Hey everyone, I've started using tRPC for my API endpoints and my project is based in Svelte/SvelteKit and in that eco system we have this https://superforms.rocks/ library for handling form data. I am unsure what to choose here

What's the benefit of using the context instead of a direct import for the database connection?

I've wondered why I should use the tRPC context instead of just importing my database singleton from a module. Is there any benefit to it? Because of TS performance issues, I'm creating multiple functions for bigger procedures. And passing the db connection around may be an unnecessary overhead....

Using both tRPC React client AND tRPC React Query client

Hey all! We are successfully using both the React client and the React Query client. We do this because we have differnet use cases for the two strategies. However, we've just started using WebSockets (for tRPC subscriptions), and it seems to be difficult to share the actual tRPC client between the two strategies. So with WebSockets, it always seem to create two WebSocket connections. We use this for raw React client: ``` import {createTRPCProxyClient} from "@trpc/client";...

TRPCClientErrorlike no name property

Quick question: Why doesn't TRPCClientErrorLike have the name property? It is called ErrorLike, so I would expect it to have the same required properties as Error (name and message).

applyWSSHandler yells at context error in express

I used the example code from docs. My applyWSSHandler code is:
const handler = applyWSSHandler({wss, router: appRouter, createContext});
const handler = applyWSSHandler({wss, router: appRouter, createContext});
...

How to use the errorFormatter when using an adapter?

The example here uses context.create(), which isn't something you do when using an adapter. I don't see an errorFormatter exposed in createExpressMiddleware() https://trpc.io/docs/server/error-formatting...
Solution:
Ah, it was a dumb question. It has nothing to do with adapters. ```ts const t = initTRPC.context<OuterContext>().create({ errorFormatter({ shape }) {...

One file per function call on the server side

I'd like to structure my server with one file per function call -- is this an antipattern? If not, does anyone have an example repo of how to structure the server code with one function/rpc call per file? Do I have to have one router per function call?...

Optimistic update on infinite query

Node 18.12.1 with pnpm trpc v 10.28.1 I have the following query to render a list of posts ...

Creating trpc context (express server) for testing without req and res objects.

I have seen a few examples of tests with next auth or t3 stack that is using next-auth under the hood. My problem is that I don't understand what should my inner context object contain, because I'm using express server 😦 For example, this is my context and t object. Req and res are mandatory: ```...

Does trpc (t3 stack) disable ssr from Nextjs?

Or is the ssr just not applied to the api

What is error formating

I understand error handeling but what is error formating , found it in trcp docs have'nt seen that thing before

where does opts.path and opts.type came from ? i guess by default it only stores ctx ,next and input

```ts const loggerMiddleware = middleware(async (opts) => { const start = Date.now(); Ā  const result = await opts.next();...
Solution: