tRPC

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

tRPC

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

2/2/2024

Efficient way to use tRPC client with auth headers from secure storage

Wondering if anyone has a recommended pattern on caching the deviceId / authHeader using a React Context instead of fetching it async on each request. Thanks! ```ts...

Axat

2/1/2024

Using tRPC with Expo API Routes feature?

Is there a possibility to merge "tRPC Express Adapter" with "Expo API Route Express Deployment"? tRPC Express Adapter: https://trpc.io/docs/server/adapters/express Expo API Route Express Deployment: https://docs.expo.dev/router/reference/api-routes/#express ...

Jaaneek

1/31/2024

TRPC not working on multi tenant app

Everything works on localhost. When I deploy it on the vercel None of the mutations work. ...

Wojciech Morawski

1/31/2024

TRPCClientError: Unable to transform response from server

Hi 🙂 I've just started - so nothing more than boiler plate code but for some reason it doesn't work. As you can see in attached pic, browser is ok with serwer response I am using neflify funcs as my backend ...

Spark

1/30/2024

optimistic updates tRPC v11 + TanStack Query v5

I am reading https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates#if-the-mutation-and-the-query-dont-live-in-the-same-component and I am a bit confused on the best way to implement the optimistic updates 'Via the UI'. How would I access variables from useMutationState?

Jonathan

1/30/2024

T3 Stack TRPC used in Server Actions

Is there issues using the server calls of TRPC in a nextjs server action? I am seeing weird issues when running it in production that don't happen when running it local. I am trying to narrow it down but looking for a high level of "this shouldn't be an issue", or this could be an issue. I think it may be related to my user context depending on cookies, the more I have looked everything that is not in server actions seems to work but server actions seem to be flakey in production....

Finn

1/30/2024

How do I setup subscriptions with websockets in Next.js 14 app router?

All I've found were some older examples for the pages router which for me were not very understandable or I'm just stupid. For the most part I'm having trouble understanding how exactly the websocket server is started. Does it start with Next.js or is it something that you have to seperatly? Would be glad if someone can give me some insight....

Solution:

btw i did it: You can check out the project. it uses app directory. I am using t3 stack here https://github.com/Roopaish/evento main files to look at are: tsconfig.server.json, src/server/ws-dev-server.ts (need to update prod one, will do later), trpc/react.tsx, src/server/routers/post.ts, app/(all)/post/page.tsx And also don't export thing from wss-dev-server.ts. Cause if you use those exports, next js server will try to use that port to create new WebSocketServer....

carnegiepilled

1/30/2024

Why is my tRPC + Next 14 (app router) data fetching pattern not refreshing the UI?

Goals of this post: - to know why my UI is not refreshing after i mutate the backend - to learn a better data mutation and update pattern ...

Finn

1/29/2024

Using tRPC in Next.js Middleware

Hello, I am quite new to tRPC so forgive me if I'm asking something quite obvious/dumb. I was introduced to tRPC by the t3-stack, that I discovered when I started with Next.js. Now onto the question. I am storing user session inside a database and want to validate a user that has a session_token cookie by its value. So, the value of the cookie needs to exist in the database. That way I can authenticate the request as well as associate a user. The problem I was facing is that I was having a hard time trying to access tRPC routes from the Next.js middleware. The t3 stack came with a pre-configured tRPC server and react client. Both of them do not work inside the Next.js middleware, because it runs on the Edge runtime. I have found some posts here that were asking a similar question, but none of them gave me an answer for my question....

Solution:

https://discord.com/channels/867764511159091230/1139993165860978708 Also discussed here...

twelventi

1/26/2024

need help refreshing websocket

We currently are using tRPC w/ react and websockets. We’re using the URL of the websocket as the auth token to the websocket I.e. ws://localhost?token=12345...

Anton Chuprun

1/26/2024

router is crashing when in separate file

When i use router merging and have e.g users router in separate file, i import router from trpc.ts and it is indefined when i use its methods, if users router is in trpc.ts everything is ok

Solution:

managed this stuff, took example file structure from Docs)

Gabriel

1/26/2024

How do I pass a Generic to a trpc query procedure?

I want to to something like this: ```ts type AppIdsWithConfig = typeof kodixCareAppId | typeof calendarAppId; const fakeProcedure = <T extends AppIdsWithConfig>(kodixAppId: T) => {...

Solution:

Alternatively you can use a Zod Union type on the input

Massukka

1/26/2024

Is there something to be done about trpc errors and solidjs/seroval?

Basically if you throw error in trpc route, solidjs seroval fails to serialize it during SSR. I don't know much about techinal details of this error, but do you think something could be done about this error?

Kylar

1/24/2024

How can i createCaller from a NextJs App Router if my server uses express tRPC adapter?

I'm using the express adapter for the server side of tRPC, and the client is a NextJS AppRouter app. I was getting to setting up the createCaller helper to be able to call from RSC, but createCaller needs the context, which for the express adapter is the request and response objects. The issue here is that I don't actually have the request/response objects in NextJS App router by design (https://nextjs.org/docs/app#how-can-i-access-the-request-object-in-a-layout), which leaves me unsure about how to move forward Is tRPC unusable with this setup? Do I need a proxy adapter or is there some piece that I am missing?...

Solution:

I ended up creating a wrapper around createTRPCProxyClient that grabbed the cookies and injected the authToken into trpc using httpBatchLink like so: ```export const createTRPCServerClient = async () => { const authToken = ""; // Grab from cookies return createTRPCProxyClient<AppRouter>({...

Avraj

1/23/2024

Is there a way to refetch a query with new parameters?

Hi I'm using tRPC in a Next.js app and I have a button that a user can click to get the latest data from the server. By default this data is cached in the server because the query is expensive. I've added an optional param/input in my query that looks like this: ```ts...

Solution:

What you can do is just to have a skipCache state and pass this to your useQuery. ```tsx const [skipCache, setSkipCache] = useState(false); ...

kbemaster

1/22/2024

Is there any benefit to putting the db connection in the context versus having it as an global var?

Can I do this? ```ts export const challengesRouter = router({ getChallengeById: privateProcedure .input(z.string().uuid())...

Solution:

https://discord-questions.trpc.io/m/1118183636596961360

Mugetsu

1/22/2024

Controller is already closed crash

Im using trpc with nextjs 14 app router and started to see that my app crashes due to such error. Did anyone encouter such error before ?? ```ts "error": { "type": "TRPCError",...

Billy Hawkes

1/21/2024

This page needs to bail out of prerendering at this point because it used revalidate: 0

I've been testing out partial prerendering with next using tRPC but having some issues. Everytime I build It breaks ppr due to having a revalidate 0 but I can't find where it occurs. I revalidate in the link is an hour. Here is the server caller I am using:...

MadMax

1/21/2024

How to infer query types on client?

```ts export const tenantRouter = router({ getTenants: procedure.query(() => { return { hello: "world" }; }),...

IsaacTheDev

1/21/2024

NextJS Output Typings

Quick question probably stupid, I learned about this library yesterday and completely migrated from Redux. However I noticed the types were a bit weird? Maybe it's intended but I can't find any documentation. When returning fetched documents using a Mongoose model, the correct output type is displayed on the router. However when doing the .useQuery() it says the result is unknown. (Images Attached) Another problem I face is related to a potential solution I found to this problem, by casting a type to the response it fixes the empty object type. But now the types complex values get converted to string, which I see why this would happen because data is transmitted through JSON. Is there a Generic or some type I'm missing so I can correctly type function parameters?...

Solution:

Solution: Follow This Guide: https://trpc.io/docs/server/data-transformers Although the Client <--> Server data works just fine, a transformer is needed for correct typings... For some reason. ...

Previous Next