T
TanStack•8mo ago
afraid-scarlet

I'm having an issue with an uncaught promise on a mutation

To my knowledge when you give a mutation function a promise Like a server action if it returns an error then you can use the on error and Onsuccess functions. I'm doing that all over my project and it's working just fine except in one section. 
  const mutationAddQuestion = useMutation({
        mutationFn: async (formData: FormData) => {
            const correctAnswer = Array.from({ length: numberOfAnswers }).findIndex((_, index) =>     (formData.get(`correctAnswer${index}`) === 'on')) + 1;
            const bindFormWithData = addQuestion.bind(null, courseId, email, Number(correctAnswer));
            return await bindFormWithData(formData);
        },
        onError: (error) => {
            console.error(error);
        },
        onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ['courseQuestions', email, courseId] })
            queryClient.invalidateQueries({ queryKey: ['courseAnswers', email, courseId] })
            queryClient.invalidateQueries({ queryKey: ['courseCorrectAnswers', email, courseId] })
            afterAddQuestionOrCancel();
        },
    })
  const mutationAddQuestion = useMutation({
        mutationFn: async (formData: FormData) => {
            const correctAnswer = Array.from({ length: numberOfAnswers }).findIndex((_, index) =>     (formData.get(`correctAnswer${index}`) === 'on')) + 1;
            const bindFormWithData = addQuestion.bind(null, courseId, email, Number(correctAnswer));
            return await bindFormWithData(formData);
        },
        onError: (error) => {
            console.error(error);
        },
        onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ['courseQuestions', email, courseId] })
            queryClient.invalidateQueries({ queryKey: ['courseAnswers', email, courseId] })
            queryClient.invalidateQueries({ queryKey: ['courseCorrectAnswers', email, courseId] })
            afterAddQuestionOrCancel();
        },
    })
When this fails I the error logged in the console but i also get a mutation.js:156 Uncaught (in promise) Error: Error inserting question Error. Every where else in my project when the action fails there is not uncaught (in promise warning). It causes the red warning toast from next js. else where in my project throwing an error from the action is caught and displays the warning fine. To summarize I am throwing an error from my action and feeding it to Muse mutate function which is not handling the runtime exception for some strange reason I've tried making this into a api route but sending it an error code 500 still seems to have similar results. Hoping someone could point me in the right direction.
1 Reply
afraid-scarlet
afraid-scarletOP•8mo ago
I've tried some debugging to prove that the outcome is different I've used the same action and called it in both spots, In one spot it causes an uncut promise and in the other it just displays the error code with the 500 post. here is the action I'm calling: 
export async function test() {
    throw new Error('Error testing');
}
export async function test() {
    throw new Error('Error testing');
}
It was a silly issue, I guess copilot while I was typing changed .mutate to . mutateAsync which I guess doesn't handle the errors gracefully

Did you find this page helpful?