harsh-harlequin

onError not triggering

Hi! I know this looks insane. I am chaining multiple calls together (it's very temporary!). The onError: () => deleteFirstThing.mutateAsync(_data.id) isn't triggering. I know the call works. createThing.mutateAsync part returns a 403 atm. Any thoughts?

api.mutateAsync(request, {
                onSuccess: (data) => {
                    const _data = data?.data?.data;

                    
                    if (content.configuration.length > 0 && _data?.id) {
                        const request = generateRequest(_data.id,content.configuration);

                        createThing.mutateAsync(request, {
                            onError: () => deleteFirstThing.mutateAsync(_data.id)
                        });
                    }

                    onSuccess(_data);
                    closeOnSuccess();
                    setIsLoading(false);
                },
                onError: (error) => {
                    const backendErrors = handleBackendErrors(error);

                    setSubmitError(backendErrors);
                    setIsLoading(false);
                }
            });

api.mutateAsync(request, {
                onSuccess: (data) => {
                    const _data = data?.data?.data;

                    
                    if (content.configuration.length > 0 && _data?.id) {
                        const request = generateRequest(_data.id,content.configuration);

                        createThing.mutateAsync(request, {
                            onError: () => deleteFirstThing.mutateAsync(_data.id)
                        });
                    }

                    onSuccess(_data);
                    closeOnSuccess();
                    setIsLoading(false);
                },
                onError: (error) => {
                    const backendErrors = handleBackendErrors(error);

                    setSubmitError(backendErrors);
                    setIsLoading(false);
                }
            });

6 Replies

harsh-harlequinOP•3y ago

Is it possible Axios isn't throwing the error properly? Am I using mutateAsync wrong? adding async seem to fix it. I guess that makes sense

unwilling-turquoise•3y ago

I don't know if the callbacks are triggered when using mutateAsync. The docs recommend using a try/catch:

const mutation = useMutation({ mutationFn: addTodo })

try {
  const todo = await mutation.mutateAsync(todo)
  console.log(todo)
} catch (error) {
  console.error(error)
} finally {
  console.log('done')
}

const mutation = useMutation({ mutationFn: addTodo })

try {
  const todo = await mutation.mutateAsync(todo)
  console.log(todo)
} catch (error) {
  console.error(error)
} finally {
  console.log('done')
}

https://tanstack.com/query/latest/docs/react/guides/mutations#promises

Mutations | TanStack Query Docs

Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects. For this purpose, TanStack Query exports a useMutation hook. Here's an example of a mutation that adds a new todo to the server:

harsh-harlequinOP•3y ago

Thanks Julien. That fixed the issue. Although in the codebase I'm working in I see mutateAsync work with onSuccess and onError

gradual-turquoise•3y ago

The docs show callback options the same as mutate() 👍 https://tanstack.com/query/v4/docs/react/reference/useMutation

useMutation | TanStack Query Docs

const { data,

harsh-harlequinOP•3y ago

Thanks msalsbery, it works now after adding async on the onSuccess wrapper.

api.mutateAsync(request, {
  onSuccess: async (data) => {

api.mutateAsync(request, {
  onSuccess: async (data) => {

passive-yellow•3y ago

mutate is literally the same as await muteAsync().catch(noop) it's implemented exactly like that, so mutate and mutateAsync are the same - callbacks work with either one but if you don't need the resulting promise from mutateAsync - use mutate. mutateAsync + callbacks seems like a weird combo

Gaming

Programming

onError not triggering

Did you find this page helpful?