Mutation state not changing

[ericlifs]

Hello everyone!

I'm doing my first steps on this awesome tool and I'm seeing a weird behavior that I'm not able to figure out the root cause.

I have the following useArchiveAsset hook which basically does just an axios post and when success it invalidates a query already fetched:

export default function useArchiveAsset() {
  const queryClient = useQueryClient();

  const { mutate, status, isLoading, data } = useMutation(
    (identifier: string) => api.post(API_ENDPOINTS.ARCHIVE_ASSET(identifier)),
    {
      onSuccess: () => {
        console.log('on success');
        queryClient.invalidateQueries('userCertifications');
      },
      onError: () => console.log('on error'),
    }
  );

  console.log({ mutate, status, isLoading, data });

  return {
    archiveAsset: mutate,
    isLoading,
    status,
    data,
  };
}

As you can see in the following screenshot captured from the logs:

The status is first shown as idle and the onSuccess log is there (meaning that the POST is done and it's completed) but the status is not changing to success.

There isn't much science on how this hook is used:

const { archiveAsset, status } = useArchiveAsset();

// And then later in the component
<ConfirmationModal
  message={t('archive-image.confirmation-message')}
  onConfirm={() => archiveAsset(identifier)}
/>

I wanted to understand why the status is not being changed to 'success' even when the onSuccess callback is being called.

Thanks,

Eric.

[ericlifs]

I think I know where the issue might be happening but I have no clue why. I wasn't telling you the whole picture on how the <ConfirmationModal /> (what calls my mutation) was getting rendered:

const openDownloadConfirmationMessage = () => {
    setOverlayContent(
      <ConfirmationModal
        message={t('download-image.confirmation-message')}
        onConfirm={() => downloadAsset(identifier)}
      />,
      colors.black
    );
  };

That setOverlayContent function comes from a zustand store which simply sets the component and the color within the store and then I just render the content like this:

const { OverlayContent, OverlayColor, closeOverlay } = useOverlayState();

  return (
    <>
      <Backdrop onPress={closeOverlay} color={OverlayColor} />
      {OverlayContent}
    </>
  );

Not sure if I'm missing something but passing that mutation function as the onConfirm prop of the component which is set in the zustand state doesn't work and it never calls the mutation.

[TkDodo]

try calling the mutation directly in onClick of a button. if it works then, the problem is somewhere in your dialog. If not, you can provide a minimal codesandbox reproduction without the dialog / zustand thingy :)

[ThisisMS11]

i also had a similar issue where i was callling usemutate object in a function that would be passed as a onclick to a button which didn't gave desirable results but as i tried to call the mutate directly on the click of the button things worked and status is being updated to idle,loading and success . here is the code :

this didn't work out.
` const CreatePostMutation = useMutation({
mutationFn: performAsyncTask,
mutationKey: ["CreatePostMutation"],

    onSuccess: (data: any) => {
        console.log(data);
    }

})

const handleSubmit = async () => {
/* calling mutation */
CreatePostMutation.mutate();
};
`

this worked :
<Button variant="contained" color="primary" onClick={() => CreatePostMutation.mutate()} > Post </Button>

these were not entire codes but i think one would understand what i did to solve it . thanks.