useEffect and useMutation error about conditional rendering of hooks

I am using t3 stack with tRPC, and I am trying to mark all emails as seen when the page loads by using useEffect, but this seems to give me an error about conditional rendering of hooks. Are there any other ways I can accomplish this?
const { mutate: markAsSeen } = api.paMail.markAsSeen.useMutation({
onError: () => {
ToastComponent({ message: "Database error", type: "error" });
},
});

useEffect(() => {
markAsSeen({ sentTo: paPlayer!.id });
}, [markAsSeen]);
const { mutate: markAsSeen } = api.paMail.markAsSeen.useMutation({
onError: () => {
ToastComponent({ message: "Database error", type: "error" });
},
});

useEffect(() => {
markAsSeen({ sentTo: paPlayer!.id });
}, [markAsSeen]);
6 Replies
Alex / KATT 🐱
Alex / KATT πŸ±β€’13mo ago
You probably have an if statement before usage of some hook
π›ˆπž‚π—Ώπžˆπ’†π’ˆπ–π°π›ˆ 𝐜0πŸƒ3𝗿
No, it reports the error at this code: markAsSeen({ sentTo: paPlayer!.id }); I believe it is because I am calling a hook inside another hook @alex / KATT
Alex / KATT 🐱
Alex / KATT πŸ±β€’13mo ago
try upgrading to 10.27.2
Maj
Majβ€’13mo ago
For me calling the useQuery hook in useEffect is not possible i get an error instantly
Alex / KATT 🐱
Alex / KATT πŸ±β€’13mo ago
can any of you make a reproduction? hard to help when i'm guessing the context
π›ˆπž‚π—Ώπžˆπ’†π’ˆπ–π°π›ˆ 𝐜0πŸƒ3𝗿
I gave up and ended up using a button instead, it solved my issue Seems like calling a hook inside another hook is what causes it