How to check if onErrorRetry is done with retrying?

[filipjakov]

I have the requirement in which, after a request fails 3 times, I should show a screen -> on that screen, there should be a CTA which triggers the whole cycle anew.

To achieve that, I have implemented the following code:

const [isErr, setIsErr] = useState(false);

const { data, mutate } = useSWR("id", fetcher, {
  onErrorRetry: (_, __, { errorRetryCount = 3 }, revalidate, { retryCount }) => {
    if (retryCount < errorRetryCount) {
      setIsErr(false);
      setTimeout(() => revalidate({ retryCount }), 5000);
    } else {
      setIsErr(true);
    }
  },
  // Remove the err retry screen once we get the data
  onSuccess: () => setIsErr(false),
  errorRetryCount: 3,
});

if (isErr) { return <div><button onClick={() => mutate()}/>...</div>} // error
if (!data) { return <div>...</div>} // spinner

I have two questions:

• is there a better way to acheive this (the extra isErr state seems redundant)? Can i somehow infer that onErrorRetry is on pause from the existing data/error/isValidating return values?
• is there a way to retrieve the exponentiral backoff which is overriden by the custom onErrorRetry functionality?

[icyJoseph]

Hi,

Perhaps side stepping your question, but have you considered doing this instead?

function App() {
  const [count, setCount] = useState(0);

  const { data, error } = useSWR("fails", () =>
    Promise.reject(new Error("Always fails"))
  );

  useEffect(() => {
    console.count("error");
    setCount((c) => c + 1);
  }, [error]);

  useEffect(() => {
    if (count === 3) window.alert("WOW");
  }, [count]);

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

Because I am thinking that every time a request fails, the error object it rejects to is a new reference, so you could just create a useEffect that keep track of error changes.

Regarding exponential back off, I think the default onErrorRetry is not exported (took a quick look on my fork), but could not find it. Anyways, it is just a function like:

const expBackOff = attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000) // from react-query docs

SWR's is a bit more terse, taken from here:

const maxRetryCount = config.errorRetryCount
  const currentRetryCount = opts.retryCount

  // Exponential backoff
  const timeout =
    ~~(
      (Math.random() + 0.5) *
      (1 << (currentRetryCount < 8 ? currentRetryCount : 8))
    ) * config.errorRetryInterval

  if (!isUndefined(maxRetryCount) && currentRetryCount > maxRetryCount) {
    return
  }

  setTimeout(revalidate, timeout, opts)

That being said, my proposal wouldn't require you to change the default onErrorRetry handling.