tRPC

T

tRPC

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

Join

Can you return from an API endpoint before a sync operation is complete?

I'm curious, if I have an endpoint that saves something to a DB and I choose to return from the endpoint without waiting for the DB call to finish, is it possible the server will shut down before the DB call is complete? I ran into this problem in a previous project where I was using AWS Lamdas, not Next or TRPC. I didn't want to wait for sync operations to complete if I didn't need the data in my API response, but I found that the Lambda would be shut down once I returned and often my processes would not be completed. Thanks!...

useInfiniteQuery

Hey i saw on trpc docs that it is used with prisma, but can i so it with drizzle ? How to past cursor? can somebody help me. O use t3 stack (prisma replaced for drizzle)

TRPC Next/Server Types Broken >10.5.0

Hi all, recently I upgraded from 10.5.0 to latest 10.21.2, discovering that I now have type-check errors across all apps and packages that import my TRPC package. This is preventing the ability to build, with type-checking which is not overly great. I tryed over versions like 10.10.0 and 10.6.0, etc......

JWT Token is type "never" in frontend.??!!

TRPC Backend is sending JWT Token as string but frontend is reading it as type "never". I am using transformer: superjson on both BE and FE. if i typecast it manually "as string" then it shows correct type. ...

How to properly check the contents of prefetched data?

I have dynamic route with SSG and if coming product slug is not in db I want to return notFound: true after prefetching. How to do it the right way? Right now I'm doing it like this but it looks like hack `export const getStaticProps: GetStaticProps = async (ctx) => { const ssg = await createServerSideHelpers({ router: appRouter,...

trpc/next very slow

I have set up my project using trpc/next and i have extremely slow queries, simple hello world taking around 1 full second on dev. anyone experienced something like this before? I've tried setting up my project with theo create-t3-app to compare and it's not even close, around 20ms. I can share a repo later, but if someone has had this before and knows what's likely culprit, would be nice to hear from you...

Generic handler for data.isLoading and data.isError

Hi, I'm looking for a way to create generic interface for useQuery result (budgetData from example below). My aim is to create generic function that handle isLoading and isError in every component. Example below: ```...

Bug where 2 requests are fired at once. TRPC batches them. Can I cancel the 2nd via ProcedureOption?

Hey all. I have a bug where my app fires two identical requests at the same time. This happens do to some weird upstream auth listener logic. Ideally TRPC can help me mitigate this. I want to configure ProcedureOption such that it doesn't batch, but rather only lets the first request to go through. Is this possible? ``` const updatedCartItems = await trpcClient.user.cart.replaceCartOnAuthLoaded.mutate( { anonymousCartItems,...

How to do an async API call in useEffect (T3 stack)

Hey, I have the router below and want to call the tutorasync in an useCallback function, but the only method that is available is api.chat.queryTutor.useQuery() which is a hook where you add the input in advance. But I have it available only in the useCallbackfunction. is there a way to access the function directly without a hook? ```ts export const chatRouter = createTRPCRouter({ tutor: publicProcedure...
Solution:
You are after all getting a new state back from the request, the backend is creating something for you even if it doesn't store it

pagination - Offset Method

Hi trpc has pagination example but only using cursor https://trpc.io/docs/reactjs/useinfinitequery Is there an example there that use offset pagination https://www.prisma.io/docs/concepts/components/prisma-client/pagination ...

next js appDir

Next js tRpc What are the advantages of using trpc instead of the native Next.js APIs when building a web application using appDir in Next.js? How can trpc help streamline the development process and improve the performance of the application? Can trpc provide additional benefits such as type safety and code generation that are not available with the native Next.js APIs?...

How can you fetch data on a dynamic router with trpc?

I’m creating a table component within my NextJs app. Instead of making an api call in the parent component and passing the data to the table through props I’d like the component to be able to manage its own state. How can I achieve this in trpc v10? In v9 I believe you could do const helloNoArgs = trpc.useQuery(['hello'] ...

Mocking tRPC call w/ Playwright (Transform Error)

I have a tRPC call that I would like to mock out for a Playwright E2E test. I've followed their docs as shown below and used the same transformer (superjson) from our tRPC setup.
When inspected via network tab the Call seems to succeed as expected. (image) However, the client errors w/ ...

zod input validation from ts type

I imported a type using import type { WebhookEvent } from "@clerk/nextjs/api";. Is there a way to use the type to validate the input with zod for a procedure?
createUser: publicProcedure .input(something here to use WebhookEvent with z.object)
createUser: publicProcedure .input(something here to use WebhookEvent with z.object)
...

Looking to fix my tRPC implementation

Hi guys I am looking for some help implementing tRPC in my current project, I have 3 files that need to be reviewed I think I almost have it but for some reason I am getting some errors. My goal is to replace the restful API endpoints and instead use tRPC. My first file is: src/server/app.ts Content: ```import {...

Expression produces a union type that is too complex to represent

Hi! I have started to encounter the above on error on pretty simple react components using trpc v10 useQuery hooks + zod for validation. Pretty standard type inference all the way. Arbitrary blocks of jsx are marked with that error. I am looking for pointers on how to debug this. Any help is appreciated!...

Skipping useQuery with typescript

I'm wondering if there is a way to skip a query in a typescript friendly way? rtk-query has a handy skipToken that can be used to opt out of the query (https://redux-toolkit.js.org/rtk-query/usage-with-typescript#skipping-queries-with-typescript-using-skiptoken). I see that tanstack has an enabled option, however, it seems with the trpc react hook API you must still pass a typesafe query input. Is there anything I'm missing? How is this intended to work?...

Clerk Webhook Input Undefined

Hi! I wrote a public procedure that takes in an input and updates user info based on Clerk Webhook. Clerk correctly pings the endpoint and the logic in the endpoint gets executed, but the input is undefined. I tried to ping the endpoint from postman with a request body. The request goes through but the input still says it's undefined.

Getting this error: Cannot read properties of undefined (reading 'upsert')

I'm using the T3 Stack. And I'm fairly new to tRPC so I am not sure what this error is caused. I'm getting data from chess.com and monkey type using their APIs, the request is all good, and I'm trying to save the data in a prisma db. In my tRPC function, I'm using one private procedure with a mutation that has 2 upserts that each change 2 different models in prisma. ...

Stuck trying to utilize useQuery to fetch some data on form submission

I'm trying to call a procedure in trpc through the use of useQuery in react upon form submission. So essentially I want to send the form data to the procedure then have it return some information. I'm not sure where to start on this. Does anyone have some guidance or a very basic example that could point me in the right direction? Im currently doing something similar with useMutation but in this case im actually changing data in the db. I can just utilize useMutation here to fetch the information I need, however this doesn't seem like its really the right way to approach this. Would love some insight on how to handle this properly. Thanks...