trpc mutation call stuck

I have an issue with a simple mutation procedure: getPublicUser: publicProcedure .input(z.object({ walletAddress: z.string() })) .mutation(async ({ ctx, input }) => { console.log('ctx.prisma: ', ctx.prisma) try { const user = await ctx.prisma.users.findUnique({ where: { walletAddress: input.walletAddress }, select: { walletAddress: true, id: true, } }) return user } catch (e: any) { console.log('E: ', e) } }) It shows in my console that it calls the mutation successfully, but it keeps on being stuck. It does not log the first like in the code even. My trpc.ts setup: const t = initTRPC.context<typeof createTRPCContext>().create({ transformer: superjson, errorFormatter({ shape, error }) { return { ...shape, data: { ...shape.data, zodError: error.cause instanceof ZodError ? error.cause.flatten() : null, }, }; }, }); export const createTRPCContext = async (_opts: CreateNextContextOptions) => { const { req, res } = _opts; async function getUserFromHeader() { console.log('req.headers.authorization: ', req.headers.authorization) if (req.headers.authorization && req.headers.authorization.split(' ')[1]) { try { const token = localStorage.getItem('crypties:auth') if (!token) return null; const parsedToken = JSON.parse(token); if (new Date(parsedToken.validUntil) < new Date()) return null console.log('token: ', token) const user = await prisma.users.findFirst({ where: { walletAddress: parsedToken.userWalletAddress }, }); return user; } catch (error) { return null; } } return null; } return { req, res, user: await getUserFromHeader(), prisma }; }; export const publicProcedure = t.procedure;
Nick
Nick179d ago
We'll need a lot more info to help here, debug logs from the frontend and backend for a start
juico
juico179d ago
In front end I can't log anything as it just hangs and doesn't do anything. The only log I have the call of the function:
No description
juico
juico179d ago
No description
juico
juico179d ago
The furthest I get to backend is a log inside createTRPCContext function. Since it tries to get the token, it returns null if it doesn't and should allow publicProcedure trpc calls. It passes that, returns null successfully, but then when it calls the publicProcedure getPublicUser it just hangs and it seems like it just freezes.
Nick
Nick179d ago
What's in the network debugger?
juico
juico179d ago
Not sure if I understand correctly, are you talking about something like loggerLink?
Nick
Nick179d ago
In the browser on the network tab
juico
juico179d ago
In the network tab the response is just blank and under timing it shows that request has not finished yet:
No description
juico
juico179d ago
If I call it multiple times, the same thing is happening, just seems to be completely stuck Ok so dug out more weird stuff going on. Not only does the request freeze, but even after I quit the app and run again the default port 3000 is still being used so it switches to port 3001. Even after I use killall node command the port is still being in use. Now if I use port 3001 and call the trpc endpoint again, the request freezes again and after I kill the app and run it one more time the port 3001 is also still in use and it jumps to port 3002. This is just really really strange, but I did see another think that might be an issue and that is the webpack-hmr which is I believe what next js uses, but it seems to be frozen too since it shows the same message that request is not finished yet, so I guess it waits for that webpack to finish before it takes anything else. This is just really really strange behavior I've not see before
Nick
Nick179d ago
Yeah this definitely looks like something with your dev setup and the server you’re hosting trpc within Request is leaving your browser but never reaching trpc, so you should check everything between the two
juico
juico179d ago
It seems I'm not the only one having an issue with this. There are several threads where people have the same problem that is related to next js. I hope once that is solved trpc calls will work as usual
Fernando
Fernando160d ago
Commenting because i have the same issue and i've always needed to kill the server manually but unlike the OP i've had the problem when i changed the publicProcedure to protectedProcedure so in my case i believe it's something related to middleware, also in my network tab the request was made by the frontend even though it was forever pending, maybe something related to CORS? i've read the docs in the oficial site but it didn't help at all, also i didn't use the t3 stack but based my project on trpc-minimal-starter
xpru67
xpru67107d ago
Hey, I have the same issue! What's going on, any news regarding this?
More Posts
Create client based on OpenAPIHi! I am running a golang server with an openapi spec and would love to use trpc client in my fronteTRPC with react query, getting error twice?When i am try to show TRPC error in the client side with react-query, i am getting error twice from Error building create-t3-app: Page couldn't be rendered statically because it used `cookies`I get the following error when building create-t3-app: ``` TRPCClientError: Dynamic server usage: PaCompressing parts of query/mutation inputHi, I'm using trpc with the proxyclient for typesafety but recently hit an obstacle where some strin`useSuspenseQuery` still runs a fetch on SSR even when setting `ssr: false` in the api configBeside double-fetching, this causes issues during rendering if you have auth on your routes as the SUnsubscription callback triggering immediatelyHey! I am currently using Bun that's queried via a Vue application. For some reason the unsubscribeMultiple optimistic updates and old data from refetchesHi all, I'm new to tRPC and React Query and I'm just trying to get my head around what exactly I'm dPass headers when prefetching using helpersI dont see a way to pass headers and cookies with either fetch/prefetch methods from the ssr helper.I am getting a errors after starting a TRPC project with T3. "Unsafe return of an `any` typed value"It seems like something is off between Prisma and TRPC but I can't figure out why the type infrence Is there a similar handler to createNextApiHandler for fastify?I'm trying to create a global error handler in fatsify but I can't find anything. Is this even a thiHow does trpc typing workI'm curious to know how trpc generates type without a code gen step , i am trying to acheive somethtRPC with app routerHi, where I can find basic and simple code for trpc for next.js app router?Globally handle specific Error type on backendHi, i have a lot of code that's used for both backend and frontend. That's why i'm not throwing TRPCHow to use token in headers() ?in `_app.tsx` i have this ```import React from 'react'; import { trpcApi, trpcApiClientProvider } fCreating inner context for AWS Lambda Context OptionsHi All, I have been using tRPC for many routes, and I have started to realize I need to call certaiRetry even when disabledI'm not positive if this is a tRPC question or Tanstack.... but I have my query disabled per TanstacMiddleware or request lifecycle hook to run after procedure?Hi, I am using trpc context to create a database client for an incoming request. My understanding iUse RxJS Observable for subscription procedureOn the server, I have an RxJS Observable that I'd like to use for one of my subscription procedures.Individual mutation requests errorHello, quick question regarding the error handling for tRPC So I'm creating kind of a chatroom wherTRPCClientError: fetch failed, using Node 18 in DockerI have both my app and my tRPC server running in Docker via the following docker-compose config: ("n