Use toast.promise to issue an error if a response is not ok

[psaffrey]

First of all, thanks for the library which is really great and makes my applications look much better :)

I would like to use toast.promise to issue an error if a promise completes, but contains a response that is an error - that is Response.ok is false or response.status is not 200. At the moment I have something like this:

    const wg_promise = my_api_call()
    toast.promise(wg_promise,
      {
        pending: "Getting API call",
        success: {
          render(response: any) {
            if(!response.data.ok) {
              return `failed!`
            } else {
              return `finished!`
            }
          }
        },
        error: "failed to get API call!"
      },
      { theme: "dark" }
    )

which does at least say "failed" when the response is a 500, but it does it in a green "success" toast. How do I adjust this? I thought I could use toast,update, which the documentation mentions, but I can't figure out how to get the toastId from the toast.promise call.

[fkhadra]

Hey @psaffrey, I see 2 ways to solve your issue.

1. Wrap your API call so it throw when response.data.ok is not ok

// return a string when it resolve otherwise throw an error
async function myPromise() {
  try {
    const response = await my_api_call();
    if (!response.data.ok) throw new Error('Failed!');
    return 'finished!';
  } catch (error) {
    throw error;
  }
}

toast.promise(
  myPromise,
  {
    pending: 'Getting API call',
    success: {
      // data is a string
      render({ data }) {
        return data;
      }
    },
    error: {
      // data is an instance of Error
      render({data}){
        return data.message
      }
    }
  },
  { theme: 'dark' }
);

2. Using toast.loading + toast.update

async function myPromise() {
  try {
   const toastId = toast.loading("Getting API call")
    const response = await my_api_call();
    if (!response.data.ok) {
      throw new Error("Failed!")
    } else {
       toast.update(toastId, {
        render: () => "Finished",
        type: "success"
      })
    }
    return 'finished!';
  } catch (error) {
      toast.update(toastId, {
        render: () => `${error.message}`,
        type: "error"
      })
  }
}

[psaffrey]

Perfect, thanks!