Exposing `defaultConfig` values like`onErrorRetry` for improved extensibility #1784

kripod · 2022-01-13T20:58:01Z

kripod
Jan 13, 2022

The documentation suggests overriding the onErrorRetry method as a whole, e.g. when trying to avoid re-sending a request responding with a 4xx (client-side) error. That feels both cumbersome and error-prone, as exponential backoff isn’t straightforward to implement properly.

I suggest exposing the defaultConfig object from the package publicly, so that it could be relied upon without hassle:

import type { AppProps } from "next/app";
import { defaultSWRConfig, SWRConfig } from "swr";

import { ResponseError } from "@/errors/ResponseError";

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SWRConfig
      value={{
        onErrorRetry: (err, ...restArgs) => {
          if (
            err instanceof ResponseError &&
            err.response.status >= 400 &&
            err.response.status < 500
          ) {
            return;
          }

          defaultSWRConfig.onErrorRetry(err, ...restArgs);
        },
      }}
    >
      <Component {...pageProps} />
    </SWRConfig>
  );
}

For comparison, here’s the current method for achieving the same results:

import type { AppProps } from "next/app";
import { SWRConfig } from "swr";

import { ResponseError } from "@/errors/ResponseError";

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SWRConfig
      value={{
        onErrorRetry: (err, _key, config, revalidate, revalidateOpts) => {
          if (
            err instanceof ResponseError &&
            err.response.status >= 400 &&
            err.response.status < 500
          ) {
            return;
          }

          /* Base implementation adopted from SWR follows */

          const maxRetryCount = config.errorRetryCount;
          const currentRetryCount = revalidateOpts.retryCount;

          // Exponential backoff
          const timeout =
            Math.trunc(
              (Math.random() + 0.5) * 2 ** Math.min(currentRetryCount, 8),
            ) * config.errorRetryInterval;

          if (maxRetryCount != null && currentRetryCount > maxRetryCount) {
            return;
          }

          setTimeout(() => {
            revalidate(revalidateOpts);
          }, timeout);
        },
      }}
    >
      <Component {...pageProps} />
    </SWRConfig>
  );
}

I think exposing defaultSWRConfig without having to rely upon useSWRConfig outside the SWRConfig provider offers the added value that SWR config options could be defined outside React components – keeping the config object stable by nature to avoid unnecessary recalculations.