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
        });
      });
  };

Can you specify the error, please? – Uzair_07 Sep 19 '22 at 11:44 — Uzair_07, Sep 19 '22 at 11:44

SkCODE · Answer 1 · 2022-07-16T04:28:23.567

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 });
   });
}

If it is not working then store toast id in useRef and then it will work.

Chakib Salah · Answer 2 · 2022-03-24T14:52:27.700

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>
       );
   }

score 1 · Answer 3 · answered Oct 20 '22 at 14:31

You can use toast.update (https://fkhadra.github.io/react-toastify/update-toast)

const toastId = useRef(null)

const fetch() => {
    toastId.current = toast.loading("Loading...")

    axios
        .post(...)
        .then(() => {
            toast.update(toastId.current, {
                render: "Your message...",
                type: "success",
                isLoading: "false"
            }
        })
        .catch(() => {
            toast.update(toastId.current, {
                render: "Your message...",
                type: "error",
                isLoading: "false"
            }
        })
}

How to use react-toastify promise in axios

3 Answers3