Rejected react-query mutation causing "Uncaught (in promise)" error

Question

After upgrading react-scripts from v4 to v5, I'm facing a problem with react-query ^3.34.8.

I am rejecting a promise within useMutation which is causing the runtime error Uncaught (in promise):

// Component.js
import useDeleteMutation from './useDeleteMutation';
  
export default function Component(){
  const { mutateAsync: delete } = useDeleteMutation();
  
  return (
    <button onClick={delete}>Delete</button>
  );
}

// useDeleteMutation.js
import { useMutation } from 'react-query';

export default function useDeleteMutation() {
  return useMutation(
    async () => {
      return Promise.reject('Simulate failure');
    },
  )
};

Reading this and this it seems I am missing a try/catch. However I have tried adding them (around the call to delete() and around the Promise.reject statement) yet the runtime error remains.

Any idea what I'm missing? what else can I wrap in a try/catch? I don't want to just silence the warning in create-react-app's config.

Thanks.

TkDodo · Accepted Answer · 2023-06-24 06:40:40Z

2

you can use mutate instead of mutateAsync if you don't need access to the returned Promise. It will catch errors internally.
in v4, you will still see a log statement in the console unless you pass a custom logger that doesn't write to the console. In v5, we will no longer log failed requests to the console because they are not a "warning" that developers should be alerted about.

answered Jun 24, 2023 at 6:40

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alan P. Over a year ago

Thanks that does seem to work, however we went another direction as we may use the promise later (will post another answer).

Alan P. · Accepted Answer · 2023-06-26 16:38:08Z

0

Appending .catch to the delete call, and tweaking what the useMutation hook returns fixed the error:

// Component.js
import useDeleteMutation from './useDeleteMutation';
  
export default function Component(){
  const { mutateAsync: delete } = useDeleteMutation();
  
  return (
    <button onClick={() => { delete().catch(e => {}); }}>
     Delete
   </button>
  );
}

// useDeleteMutation.js
import { useMutation } from 'react-query';

export default function useDeleteMutation() {
  return useMutation(
    async () => {
      return new Promise(async (resolve, reject) => {
        reject('Simulate failure');
      });
    },
  )
};

answered Jun 26, 2023 at 16:38

Alan P.

3,1537 gold badges34 silver badges60 bronze badges

Collectives™ on Stack Overflow

Rejected react-query mutation causing "Uncaught (in promise)" error

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related