Peform
Peform2mo ago

onSuccess mutation not being called

Hey, I have this mutation which is called when I click a button. Inside the onSuccess callback I show a toast to the user telling them that the request was successful. However, when I do a state change before I call the mutation, eg setRequests the onSuccess callback never runs, I know this because the console log never appears. But, when I remove the setRequests it does, there is no visible error in my console. Why does this happen? Is it by design?
export const GenerationsCard = ({ generation, selectedFlag, setRequests }: Props) => {
const clearMutation = api.generations.clear.useMutation();
const warnMutation = api.punishments.warn.useMutation();
const banMutation = api.punishments.ban.useMutation();

const handleBanGeneration = async (requestId: string, requestType: string) => {
setRequests((prev) => prev?.filter((req) => req.id !== requestId));
await banMutation.mutateAsync(
{ requestId, requestType },
{
onSuccess: (response) => {
console.log(234243243);
toast('Success', {
description: response.message,
action: {
label: 'Undo',
onClick: () => console.log('Undo'),
},
});
},
onError: (error) => {},
},
);
};
export const GenerationsCard = ({ generation, selectedFlag, setRequests }: Props) => {
const clearMutation = api.generations.clear.useMutation();
const warnMutation = api.punishments.warn.useMutation();
const banMutation = api.punishments.ban.useMutation();

const handleBanGeneration = async (requestId: string, requestType: string) => {
setRequests((prev) => prev?.filter((req) => req.id !== requestId));
await banMutation.mutateAsync(
{ requestId, requestType },
{
onSuccess: (response) => {
console.log(234243243);
toast('Success', {
description: response.message,
action: {
label: 'Undo',
onClick: () => console.log('Undo'),
},
});
},
onError: (error) => {},
},
);
};
1 Reply
Nick
Nick5w ago
This probably goes way beyond the component you've shared given it's a prop. I'd expect you're remounting the component or wiping out the QueryClient somehow