Redux - How to use react-hot-toast with async await Axios call

hey guys, I saw the other question about this but it did not help me. I have tried multiple ways to get this to work but cannot seem to make it work.

I tried this:

export const postVersionBulkAction = (args) => {
	let url = `${apiBase}/smart-list/version/${args.versionId}/action`
	let promise = queue.wrap(async (dispatch) => {
		let params = { iabCategoriesActions: args.iabCategoriesActions }
		const result = await axios.patch(url, params)
		if (result.status === 200) {
		}
	})
	toast.promise(promise, {
		loading: 'Saving...',
		success: 'saved',
		error: 'error'
	})
}

but that gives me an error: ‘TypeError: promise.then is not a function’

I’ve also tried this:

export const postVersionBulkAction = (args) => {
	let url = `${apiBase}/smart-list/version/${args.versionId}/action`
	return queue.wrap(async (dispatch) => {
		try {
			let params = { iabCategoriesActions: args.iabCategoriesActions }
			const result = await axios.patch(url, params)
			toast.promise(result, {
				loading: 'Saving...',
				success: 'saved',
				error: 'error'
			})
		} catch (error) {
			alert(error)
		}
	})
}

but i get ‘promise.then is not a function’ error on that one too.

I’ve also tried calling it like this:

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

but that way always fires the success toast even if it fails.

Any idea how i could make this work?

PS. thanks for the awesome product! Other than this problem it has helped me so much, and I have succesfully removed thousands of lines of redux boilerplate because of this library. thanks again

[ingusjan]

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)

[gugocharade]

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!',
    });