How to use react-toastify promise in axios

Question

// how can I use the promise of toastify like I want to show spinner while fetching data then message success or failed

// but I am getting error in bellow code

const fetch = () => {
    axios
      .get("https://restcountries.com/v2/name/india")
      .then((res) => {
        toast.promise({
          pending:"pending",
          success:"success",
          error:"rejected"
        } )
        console.log(res);
      })
      .catch((err) => {
        toast.error("🦄 failed", {
          position: "top-center",
          autoClose: 2000,
          hideProgressBar: true,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined
        });
      });
  };

Answer 1

According to toast API https://fkhadra.github.io/react-toastify/promise/ the syntax should be

const myPromise = fetchData();


toast.promise(myPromise, {
   loading: 'Loading',
   success: 'Got the data',
   error: 'Error when fetching',
})

An example which can be found on https://codesandbox.io/s/twilight-bash-jzs24y?file=/src/App.js

 export default function App() {
        
        const myPromise = new Promise((resolve) =>
         fetch("https://jsonplaceholder.typicode.com/todos/1")
           .then((response) => response.json())
           .then((json) => setTimeout(() => resolve(json), 3000)) 
           // setTimeout just for the example , cause it will load quickly without it .
        );

       useEffect(() => {
         toast.promise(myPromise, {
              pending: "Promise is pending",
              success: "Promise  Loaded",
              error: "error"
         });
       }, []);

       return (
             <div className="App">
                  <ToastContainer />
             </div>
       );
   }

Answer 2

If you are not using promise. Use toast.loading. (DOCS: https://fkhadra.github.io/react-toastify/promise/#toastloading)

const getData = () => {
 const id = toast.loading("Please wait...")
 axios.get(`some-url`)
   .then(res => { 
      toast.update(id, {render: "All is good", type: "success", isLoading: false});
 }).catch(err => {
        toast.update(id, {render: "Something went wrong", type: "error", isLoading: false });
   });
}