auto retry has timer issues with mutate

[kdong007]

Here is the sample code:

import useSWR from "swr";
import delay from "delay";

export async function mockFetchRandomNumber(multiplier = 1) {
  console.log("** mock sending request");
  await delay(2000);

  return (Math.floor(Math.random() * 100) + 1) * multiplier;
}

export async function mockFetchRandomNumberWithR50Error(multiplier) {
  return mockFetchRandomNumber(multiplier).then((data) => {
    const r = Math.random();
    console.log("r", r);
    if (r < 0.5) {
      throw new Error("mock error");
    }
    return data;
  });
}

const Content = () => {
  const { data, isLoading, error, mutate } = useSWR("some-key", () =>
    mockFetchRandomNumberWithR50Error()
  );

  if (isLoading) {
    return <p>loading...</p>;
  }
  if (error) {
    return (
      <div>
        <p>Something went wrong</p>
        <button onClick={() => mutate()}>Retry</button>
      </div>
    );
  }

  return <p>Random number: {data}</p>;
};

I added a button to manually retry the request with mutate. However when that happens, the automatic retry timer is still queued and you might see this:

Loading...
Error..
(click retry)
Loading...
Success display content

Then it flashes into Error... again due to the queued auto retry timer