Redux - How to use react-hot-toast with async await Axios call about react-hot-toast HOT 11 CLOSED

Have you tried ensuring your .catch was first and .then following it? Weirdly enough, that fixed this same issue for me.

 const callMyFunction = callFunction({ username: this.state.username })
      .catch((error) => {
        // Getting the Error details.
        console.error(error.message);
        return error.message;
      })
      .then((res) => {
        console.log(res);
        refreshData();
      });

    toast.promise(callMyFunction, {
      loading: "Loading...",
      success: "Everything went smoothly.",
      error: "Uh oh, there was an error!",
    });

(I know this isn't an Axios example, but the promise structure is relatively the same)

from react-hot-toast.

This worked for me

const res = fetch(apiUrl);

    toast.promise(res, {
      loading: 'Loading ...',
      success: (data) => {
        console.log(data);
        if (data.status === 500) throw new Error('server error');
        return 'Everything went smoothly.';
      },
      error: 'Uh oh, there was an error!',
    });

from react-hot-toast.

The toast.promise function returns the promise, so you could use something like this:

const callMyFunction = toast.promise(callFunction({ username: this.state.username }), {
      loading: "Loading...",
      success: "Everything went smoothly.",
      error: "Uh oh, there was an error!",
    });
callMyFunction.then((res) => {
    console.log(res);
    refreshData();
})
 .catch((error) => {
        // Getting the Error details.
        console.error(error.message);
        return error.message;
      });
      

    

from react-hot-toast.

In case anyone using firebase:

 toast.promise(
      createUserWithEmailAndPassword(authInstance, email, password),
      {
        loading: "loading...",
        success: (result) => `success, ${result.user}`,
        error: (e) => `error ${e.message}`,
      }
    );

Thanks a lot, this work for me...

from react-hot-toast.

Hey! I'm not entirely sure what is going on but I think it should work like this:

const promise = axios.patch(url, params)

toast.promise(promise, {
  loading: 'Saving...',
  success: <b>saved!</b>,
  error: <b>Could not apply.</b>
})

const result = await promise

from react-hot-toast.

Hey! I'm not entirely sure what is going on but I think it should work like this:

const promise = axios.patch(url, params)

toast.promise(promise, {
  loading: 'Saving...',
  success: <b>saved!</b>,
  error: <b>Could not apply.</b>
})

const result = await promise

It is still popping up as a success when I try your way even when the network call is failing with a 404:

export const postVersionBulkAction = (args) => {	
	return async (dispatch) => {		
		const promise = axios.patch(badUrl,  params )
		toast.promise(promise, {
			loading: 'Saving...',
			success: 'saved',
			error: 'error'
		})

		const result = await promise
	}
}

it pops up a success immediately

Edited: removed some of the extraneous stuff from the function to make it easier for someone to diagnose

from react-hot-toast.

@JaredDahlke did you ever resolve this? I am also seeing this error when trying to write a unit test for a component using toast.promise

from react-hot-toast.

Here is what works for

const promise = axios.patch(url, params)

toast.promise(promise, {
  loading: 'Saving...',
  success: <b>saved!</b>,
  error: <b>Could not apply.</b>
},
, {
   style: {
    minWidth: '250px',
   }
 }
)
.then((r) => r)
.catch((error) => error);

from react-hot-toast.

In case anyone using firebase:

 toast.promise(
      createUserWithEmailAndPassword(authInstance, email, password),
      {
        loading: "loading...",
        success: (result) => `success, ${result.user}`,
        error: (e) => `error ${e.message}`,
      }
    );

from react-hot-toast.

In my case, make sure you throw an error after doing a catch

This Work for me

 const callMyFunction = callFunction({ username: this.state.username })
      .catch((error) => {
        // Getting the Error details.
        console.error(error.message);
        throw error; // throw again after you catch
      })
      .then((res) => {
        console.log(res);
        refreshData();
      });

    toast.promise(callMyFunction, {
      loading: "Loading...",
      success: "Everything went smoothly.",
      error: "Uh oh, there was an error!",
    });

from react-hot-toast.

This is a bit tricky due to the next:

• The server errors are not handled as an error within javascript
• We expect errors from the server as normal error

I solved this by doing the next: throwing an error from the my toast code if the server was not sending the expected/ok statues.

toast.promise(fetch(someURL), {
      loading: "Loading ...",
      success: data => {
        if (!data.ok) { //here you can that this will throw the error from the returned data. Usually it's treated as normal thing.
          throw new Error(`Statues code ${data.status}`);
        }
        return "Everything went good";
      },
      error: e => {
        return `Uh oh, there was an error! ${e.message}`;
      },
    })

from react-hot-toast.