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;13 Replies
We'll need a lot more info to help here, debug logs from the frontend and backend for a start
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:
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.What's in the network debugger?
Not sure if I understand correctly, are you talking about something like loggerLink?
In the browser on the network tab
In the network tab the response is just blank and under timing it shows that request has not finished yet:
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
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
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
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-starterHey, I have the same issue! What's going on, any news regarding this?