How to use react-query with an axios interceptor?

[javierguzman]

Hello all,

I want to have an Axios interceptor so I can set the proper error message depending on what has happened, something like this:

import axios, { AxiosInstance } from 'axios';
import { TFunction } from 'i18next';

export default abstract class API {
  private static instance: AxiosInstance;

  static create(t: TFunction): void {
    API.instance = axios.create();
    API.instance.interceptors.response.use(
      response => response,
      error => {
        // t('common:common-front-end-error') when working use translation function
        let errorMessage = new Error('error from intercept');
        // if (error.response?.data?.payload) {
        //   errorMessage = error.response.data.payload;
        // }
        Promise.reject(errorMessage);
      }
    );
  }

  static getInstance(): AxiosInstance {
    return API.instance;
  }
}

Now, my React Query is like this:

 const queryInfo = useQuery<any, Error>(
    ['blabla', currentPage],
    fetchBlabla(currentPage),
    {
      onSuccess: data => {
        setBlabla(data.payload);
        if (totalCount === 0 && data.totalCount !== 0) {
          setTotalCount(data.totalCount);
        }
      },
      onError: error => {
        console.log('On error function within query');
        console.log(error);
      },
      refetchOnWindowFocus: false
    }
  );

And my fetchBlabla is:

const fetchBlabla = currentPage => async (): Promise<any> => {
  const api = API.getInstance();
  const response = await api.get<ListCountriesResponse>(
    `/api/blabla&limit=20&offset=${(currentPage - 1) * 20}`
  );
  return response.data;
};

However, I keep getting uncaught exceptions or exceptions saying " response is undefined ". How is the best way to handle this?

I have tried adding try/catch on fetchBlabla but to make it work properly and I have to rethrow the error within the catch, making a red exception appear on the console. I added the rethrow because on the docs say fetchBlabla should throw an error in order to React-Query pick it, however, I am not really a fan of throwing error and make the console red. Also, why to rethrow again an error that already exists? Does this make sense?

Thank you in advance and regards

[TkDodo]

I tried to answer this on stackoverflow: https://stackoverflow.com/questions/69838642/axios-intercept-error-promise-or-throw-error

For anything more, I think I'd need a codesandbox reproduction that shows your error please.

[javierguzman]

Thank you very much TkDodo! I have taken a look at your response and indeed the try/catch within the fetch function does not make sense and it does not make any difference as far as I can tell.

However, in the axios interceptor I still need to throw the error, if I use this it works:

    API.instance.interceptors.response.use(
      response => response,
      error => {
        const modifiedError = error;
        let errorMessage =
          t('common:common-front-end-error') || 'Something wrong happened, please, try later';
        if (error.response?.data?.payload) {
          errorMessage = error.response.data.payload;
        }
        modifiedError.message = errorMessage;
        throw modifiedError;
      }
    );

But if I use Promise.reject(modifiedError) instead of throw modifiedError then the react-query error message is "response is undefined" and in the console I see an uncaught promise error message. Do you expect this behavior?

[TkDodo]

I don’t know how axios interceptors work. As far as I can see, the method is not async, so throwing an Error and returning a rejected promise is not the same.

As far as RQ is concerned, we need a resolved or rejected promise retuned from the queryFn.

[javierguzman]

I see. I think I will leave it like it is now (throw Error within the interceptor) as it seems to work ok for now! If I see some side effect I will stop again and think what it is going on. Thank you very much for the help 😄

[bytesagar]

@TkDodo How can we use error boundary to catch Network error and show a network error fallback ui and if internal logical error in react qith reacr query.
help me to get through this

[TkDodo]

useErrorBoundary can accept a function. from the docs:

useErrorBoundary: undefined | boolean | (error: TError, query: Query) => boolean
Defaults to the global query config's useErrorBoundary value, which is undefined
Set this to true if you want errors to be thrown in the render phase and propagate to the nearest error boundary
Set this to false to disable suspense's default behavior of throwing errors to the error boundary.
If set to a function, it will be passed the error and the query, and it should return a boolean indicating whether to show the error in an error boundary (true) or return the error as state (false)

[xBajci]

@javierguzman I think the issue might be that you DON'T return that rejected promise. This effectively breaks the promise chain - Hello "Uncaught rejection" :)

The another issue might be that your error handler is not async function as you have just () => {} and not async () => {}. This also breaks the promise chain.

Try:

const fn = () => {throw new Error('Boom')}
await fn().catch(console.log)  // => Uncaught

const afn = async () => {throw new Error('Boom')}
await afn().catch(console.log) // => nice console log

So I would say you either need to return rejected promise or make your handle async.