SWR fetching infinite times on error

[shanemcgraw]

I'm experiencing some strange behavior when SWR encounters a fetch error (both 2.0.0 and 2.0.1): an infinite request loop.

My fetcher is using axios with a simple setup:

const axiosInstance = axios.create({
  baseURL: apiBaseUrl,
});

const swrFetcher = <T>(url: string): Promise<T> => {
  return axiosInstance.get<T>(url).then((res) => res.data);
};

export default swrFetcher;

...and I'm not using any other error handling config, just a straight up useSWR(url, swrFetcher) in my components. If a request fails (either 4XX or 5XX, or if I block it using the Chrome devtools network tab), SWR appears to go into an infinite loop of network calls until one of them returns a 200-level response (e.g. if I disable network blocking on the url).

Am I missing something trivial? According to the docs, I thought there should be an exponential backoff. I've tried using shouldRetryOnError to disable retrying, but it still sends out the infinite loop of requests.

(Using Next 12.1.0)

[koba04]

@shanemcgraw Could you reproduce this on CodeSandbox?

[shanemcgraw]

Thanks so much for responding @koba04 ! In my debugging I realized the issue was due to me using an SWR hook directly inside _app.tsx; moving the hook out to another component solved the problem. Carry on!