Fetcher isn't run again when error boundary resets using Suspense. about swr

[ConsoleTVs]

This likely happens due promise catching. The only way I've found to invalidate the cache is to change the key of the SWR hook. The example below uses an array as the key but you may also use other data structures, or even the same url with different query params. In the end, you have to invalidate the last key. Think of it as a useMemo(promise, [key]).

The following solution refetches the exact same url by using an array instead of a different url string:

import {
  PropsWithChildren,
  Suspense,
  createContext,
  useContext,
  useState,
} from "react";
import { ErrorBoundary, FallbackProps } from "react-error-boundary";
import useSWR, { SWRConfig, SWRConfiguration } from "swr";

async function fetcher(key: string | [string, string]) {
  const url = Array.isArray(key) ? key[1] : key;

  console.log("fetching", key, url);
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error("Failed to fetch");
  }

  return await response.json();
}

function User() {
  const key = useContext(KeyContext);
  const { data } = useSWR(() => [
    key,
    `https://jsonplaceholder.typicode.com/users/1222`,
  ]);

  return <div>{data?.name}</div>;
}

const config: SWRConfiguration = {
  fetcher,
  suspense: true,
};

const KeyContext = createContext<string>("");

function SafeSuspense({ children }: PropsWithChildren) {
  function random(): string {
    return Math.random().toString(36).slice(2, 7);
  }

  const [key, setKey] = useState(random());

  function reset({ error, resetErrorBoundary }: FallbackProps) {
    function resetBoundary() {
      setKey(random());
      resetErrorBoundary();
    }

    return (
      <>
        <div>{error.toString()}</div>
        <button onClick={resetBoundary}>Retry</button>
      </>
    );
  }

  return (
    <ErrorBoundary fallbackRender={reset}>
      <Suspense fallback={<div>Loading</div>}>
        <KeyContext.Provider value={key}>{children}</KeyContext.Provider>
      </Suspense>
    </ErrorBoundary>
  );
}

function App() {
  return (
    <SWRConfig value={config}>
      <SafeSuspense>
        <User />
      </SafeSuspense>
    </SWRConfig>
  );
}

export default App;

What can we do?

I would advise to have this functionality internally in SWR. I would advice to have a key/id in the memo dependency list that came from a context. That way, you could expose a invalidate() or invalidate(key) so that people could use it in their error boundaries. I am not sure if this solution suits the internals of SWR but for sure it does the trick here.