Peform•5d 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•3d 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