Perform an action in case of an error and run the same request once again

[eshlox]

Hi!

I would like to refresh JWT token when API returns 401 error. SWR has onErrorRetry function. It allows for the implementation of additional logic (globally, for all requests) before the request is processed again. I can use it to refresh the token, store it somewhere and retry the request with a new token.

• https://github.com/zeit/swr#error-retries
• https://github.com/zeit/swr#global-configuration

Example:

<SWRConfig
  value={{
    onErrorRetry: async (
      error,
      key,
      option,
      revalidate,
      { retryCount }
    ) => {
      if (retryCount && retryCount >= 2) return;
      if (error.status === 404) return;

      if (error.status === 401) {
        // custom logic
      }

      setTimeout(
        () =>
          revalidate({ retryCount: retryCount ? retryCount + 1 : 1 }),
        1000
      );
    },
  }}
>
  // ...
</SWRConfig>

Can I do something similar using react-query? Maybe there's a better way to do it? 🤔

[cherniavskii]

If you're using axios - use interceptors. If not - consider using it :)
I've migrated to React Query without even touching tokens refresh code.

[tannerlinsley]

I second this. While it would be possible to do this with React Query, it's not really the best place to be doing it IMO. A common request interceptor that is checking errors and revalidating when possible would be much easier and better placed than anything in React Query.

[eshlox]

Sounds good. I'm currently using fetch which refreshes the token on error (without react-query/swr). I will try to use it or go back to axios if it works better. Thanks for the answer!

[ptmkenny]

The token-query project was created to address this use case.