tRPC

T

tRPC

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

Join

tRPC deployed with Amazon API Gateway adapter, SST Ion, and Clerk auth

I am going through this https://ion.sst.dev/docs/start/aws/trpc/, but I don't know the best way to pass auth() from server Next.js to awsLambdaRequestHandler. ```ts return createTRPCContext({ event: ? // pass event.headers: heads?...

TRPC with Turborepo Nextjs

Do you guys usually put trpc inside the nextjs project or have it outside as a separate package/service? I've seen some people put the whole trpc in a package of its own and just import the api object in nextjs from the package. wondering what are the advantages and disadvantages of the either way...

Is to possible to update the trpc client url?

Hello, I have create my trpc client this way: ```ts...

websocket or sse

So, im implementing real time transcription using google api , so should i use sockets or sse in trpc for this? im using nextjs btw , also tried integrate sockets in my app , its pretty complex for a noob coder like me...

How to use output validation for dates? (Zod, SuperJSON)

I am trying to add output validation with zod, and my defined zod schema. I have currently set up superJson to transform my objects to and from, so that it can also do date transformation. If I add .output(ZodSchemaObject) it throws Expected date, received string ...

Can someone explain to me how `deserialize` works in `input` of `transformer`?

```TypeScript export interface DataTransformer { serialize(object: any): any; deserialize(object: any): any; }...

WebSocket Subscriptions in Next.js 14 Using `fetchRequestHandler` and `createTRPCReact`

Hello everyone, Does anyone have a working example of using WebSockets/subscriptions with fetchRequestHandler on Next.js 14? I haven't been able to get subscriptions working with my current approach using fetchRequestHandler and createTRPCReact. Any help would be greatly appreciated!...
Solution:
You can use the httpSubscriptionLink, but it won't work well on serverless

How do I pass FormData from client to the public procedure ?

Whilst being able to pass objects when calling mutate() from react-query's, FormData seems to not work. Logging input from public procedure results to empty object ? Any workaround ?...

TRPCClientError: Cannot use 'in' operator to search for 'error' in null

I am getting weird errors only in production. Everything works and builds perfectly fine locally, but I'm not sure why I am getting these errors in production. I am using the https://github.com/clerk/t3-turbo-and-clerk boilerplate.

All backend imports becoming accessible on frontend?

Node Environment Version: v20.10.0 Package Manager: PNPM Workspaces Repo Setup: Monorepo/Turborepo Environment: WSL with VSCode ...

Component suspends/rerenders on cached querykey

I've been trying to fix this issue for ours but dont get ahead I have a query which takes in a string literal value as an input This input is changed by the component prop...
Solution:
Somehow setting the staleTime to non 0 works as a solution

New versions doesn't fit the docs?

I just updated versions of my packages and now I get typescript errors that the my query doesn't fit with the types. It says that I'm missing initialData and queryKey for .useQuery() however docs says that the queryKey should be auto generated. No? My package versions: ``` "@tanstack/react-query": "^5.45.1", "@trpc/react-query": "10.45.2",...

Find Usages of a procedure do not show client calls.

If I define a procedure: ``` const appRouter = router({ list: publicProcedure.query(...)...

tRPC + GCP headers issue

Hey everyone, I'm currently working on a tRPC-based app and I'm facing an issue with retrieving headers set by GCP when there are errors like 504 or 500. Specifically, I want to read the X-Cloud-Trace-Context header from the frontend. In my browser, I can see that the header is being sent, but I can't seem to access it from my response in the code. Here's my setup:...

Data Race in a useEffect

Hi, I have been using tRPC for a while, and it has been amazing. I am currently running into a small issue. In one of my components, I create a new project and onSuccess, I refresh the endpoints: `const { mutate: createProjects } = trpc.createProjectsFromCsv.useMutation({...

TRPCClientError prior to the request being sent (v11, App Router)

Anyone else had this occur where you just get a TRPCClientError without the request even being visible in the network tab? I'm moving my app from pages router to app router, and testing client-side fetching with prefetching from the server. Consider the code below as an example...
No description

react-query no cookies on initial load

Using react-query client on a page that uses router server caller, when initially loading that page, react-query client does not pass cookies through. Here is a minimal reproduction repo, created with create-t3-app: https://github.com/Shmookoff/trpc-react-query-no-cookies-on-initial-load 1. Cookie test is set in the middleware. 2. The / page is invoking a procedure using server caller....

Brainstorming how to convert REST api to tRPC

I have a use case where I have a url that looks similar to /stores/:store/items/:items and store could have many sub routes to it. is there any ideas on the best way to convert this into a tRPC route?
Solution:
create a stores router with different procedures, items being one of them, and then pass :store and :item as fields on your input object, so something like: ```ts // ... .input(z.object({ storeId: z.string(), itemId: z.string() }))...

Help with tRPC + Hono + Next.js

Is there any working example of a simple app.