tRPC

T

tRPC

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

Join

Having Issue With Context in App Directory Next.js

I am having an issue with creatin the trpc context with both the session and prisma. I am trying to use the next 13 app directory and know it has been changed due to how the new api folder works. Using a publicProceedure works properly, but that protectedProcedure says unauthorized. I am using nextauth too...
No description

tRPC querying data via function not working

In the below code, fetchSocialMediaData is logging themeId but, not response, getting error as mentioned in the screenshot attached. Is there anything I missed from docs? Correct me wherever I am wrong. ```tsx type SocialMediaData = { id: string;...
No description

Next.js app router + TRPC...how to set it up?

Note You can already use tRPC with app directory, by:
>
- using @trpc/client directly in components (both RSC and non-RSC) - use @trpc/next for client components...

How do I setup App router + TRPC + Lucia Auth? (protected routes)

I'm trying to setup tRPC with Lucia in app router but I struggle to make protected routes work. I made a trpc context where I put lucia session and a getDefaultSession function to get the session ```ts...

NEXT.JS / Serverless AWS

Configured trpc locally. Everything works great. When deploying via serverless on aws - mutations do not work (however, queries work as expected). I get error: expected object / received undefined. I need it to work locally and after deployment as well. Maybe someone can help or had similar issue and resolved it already? Thank you very much!

How do I set a context dynamically?

I don't fully understand middleware in trpc and especially using it for adminProcedures. So my trpc.ts looks like this: ```...

How to make LoaderAndError component which is type safe?

I i have a query like this const { data, isLoading, isError } = trpc.settings.get.useQuery(); Now I have a LoaderAndErrorComponent like below ```tsx import React from 'react'...

TRPC vanilla client load failed when called on mobile browser

Hi, I have created a vanilla client to use TRPC without hooks in a NextJS project: ``` import { createTRPCProxyClient, httpBatchLink } from "@trpc/client"; import type { AppRouter } from "~/server/api/root";...

`createCaller` and RSC - with next-auth

I've been upgrading my trpc routers and handlers to support edge+app router with drizzle and next-auth; and something that has come up is the use of createCaller (with createTRPCNext instead of createTRPCReact - and without the TRPCProvider). So I wanted to ask if this is a correct way of using that function ```ts // app/_trpc/server-client.tsx import { type Session } from "next-auth";...

useQuery always fetching when active on page

Hi, I was call my procedure like this, using NextJs (page directory) const { isLoading, isError, isSuccess, data } = api.company.getAllAttendanceSettings.useQuery(); but the log always running.. how to prevent this query to always fetching? thanks...
No description

nextjs app router `fetchRequestHandler`'s createContext doesn't run.

Hey there, I have the following code: ```ts // /src/app/api/trpc/[trpc]/route.ts...

"Unable to transform response from server" when 401 error returned from middleware (sometimes)

I'm trying to figure out a problem where some (a few, not most) 401 error responses result in an uncaught TransformError "Unable to transform response from server". This does not happen a lot but it does hit our sentry at least once a day. 401 error responses happen all the time (particularly when JWTs expire) and in 99.9999% of cases they are handled correctly. However, every once in a while, you'll see this happen if you're watching the transformResult code (see attached screenshot). This "null" response object comes through after the correct 401 error response has already been processed correctly, so it seems to be an extra, erroneous run through the transformResult function. ...
No description

How do pass a 'blob' from frontend to backend?

I'm having trouble doing this without converting an audio Blob to base64 and then decrypting it and creating a file on the server. Base64 is huge and breaks the app, but if I create it client side it's no problem. However I don't want to expose API keys that I need in order to do so (which it does currently). Any ideas on what I could do?...

fetch failed - error on npm start on production

I rebuild my next.js app with the npm run build command and I started it with npm start I get this error when I visit the site: (In development I have no problems) ```...

Type return error when using mongoose.

node - v16.15.1 npm I'm somewhat new to trpc. Using it with mongoose. Love it so far althought I do have a problem with how types are returned. For example I have a simple procedure:...

useContext won't infer type from tRPC client

I am calling tRPC endpoints from my app and it's working flawlessly. As you can see on first screenshot it offers me autocompletion and queries return data from the server. However on some other places I would like to read data from tRPC's global state using context. Following code works & I can get the data but there is no typesafety for useContext and also auto complete on utils thinks it is of string type (2nd screenshot). ```javascript const utils = apiClient.useContext();...
No description

Forward client headers with createTRPCProxyClient & Server-Side Helpers

With createTRPCNext i had the option to tap into the context.req object nextjs passed in, but I cant achieve the same with createTRPCProxyClient. For example below code fails authentication, cause cookies arent forwarded. ```ts export const getServerSideProps: GetServerSideProps = async ctx => {...

I have a websocket + REST project. Should I be using splitLink like this to combine WS and HTTP?

I have a backend project that uses REST for queries/mutations and Websockets for subscriptions. I just want validation: is this exactly what I should be doing? Is there some other simpler way that I'm missing?...

Nested procedures are separated by dots, is there a way to change that to `/`s instead ?

currently it looks something like this /api/trpc/post.byId, is there a way to have it like /api/trpc/post/byId ?

Is there a way to split a trpc api across multiple lambdas ?

How do I go about splitting my TRPC api across multiple lambdas, such that each lambda would load the minimum code it needs to run, (ideally the frontend should not be affected )