Custom SWRConfig

App.tsx

import { SWRConfig } from "swr";
import { fetcher } from "@services/apiClient";

// Your fetcher need to throw error with an statusCode.

const MyApp = () => {

 return (
  <SWRConfig
      value={{
        fetcher,
        onErrorRetry: (error, key, config, revalidate, { retryCount }) => {
          // Never retry on 401 Unauthorized.
          if (error.status === 401) return;

          // Never retry on 404.
          if (error.status === 404) return;

          // Never retry on 403 Forbidden.
          if (error.status === 403) return;

          // Never retry on 422 Unprocessable Entity.
          if (error.status === 422) return;

          // Only retry up to 3 times.
          if (retryCount >= 3) return;

          // Retry after 5 seconds.
          setTimeout(() => revalidate({ retryCount }), 5000);
        },
      }}
    >
      <Layout>
        <Component {...pageProps} />
      </Layout>
     </SWRConfig>
)
}