Expire errored payload with `suspense: true`

I have an error boundary with a retry button that updates its own key to rerender the whole subtree. I want to retry the failed request on rerender (I use shouldRetryOnError: false).

I tried to rethrow the error around useSWR. I get the logs, but on next render, the xhr request isn’t refired, but SWR reraises the same error as before 😦

  try {
    console.log("requesting", { key });
    result = useSWR(key, fetcher, { suspense: true });
  } catch (err) {
    console.log("error", { key });
    trigger(key);
    throw err;
  }

  const { data, isValidating, revalidate } = result;

Any pointer?

Thx a lot!

[nulladdict]

Hi @bbenezech, I think the better approach is to clear out cached error in designated error boundary component Here’s a codesandbox example of approach I’ve been using

Couple points to mention:

• if we caught a promise we’re just need to re-throw it since it’s a suspender
• if we caught an actual error we save info about what key caused it, so we can clear cache entry later
• in ErrorGuard component we clear cached entry when user clicks the button, but we could also just clear it in setState callback inside componentDidCatch method instead
• we can also clear out all cached errors if we iterate over cached keys and check if they’re error or not, but that seems kinda dangerous to me

[nulladdict]

Hi, since #231 got merged you can now clear up the cached error value on your own. For your example it might look something like this:

import { cache } from 'swr';
// ...
try {
  console.log("requesting", { key });
  result = useSWR(key, fetcher, { suspense: true });
} catch (err) {
  console.log("error", { key });
  const [, , errorKey] = cache.serializeKey(key);
  cache.delete(errorKey, false);
  throw err;
}
// ...
const { data, isValidating, revalidate } = result;