axios: Open up a toast when a validation error occurs

interceptor-validation-errors.ts

import instance from './instance'
import { toast }  from '@app/components/Toast'
import { AxiosRequestConfig, AxiosError } from 'axios';

interface IAxiosInterceptorValidationConfig extends AxiosRequestConfig {
  appValidationError?: string | boolean
}

interface IAxiosInterceptorValidationError extends AxiosError {
  config: IAxiosInterceptorValidationConfig
}

/**
 * @example Disable the default validation toast
 * axios({ appValidationError: false })
 * 
 * @example Provide a custom error message
 * axios({ appValidationError: 'An error occured trying to create a contact })
 */
instance.interceptors.response.use(null, (err: IAxiosInterceptorValidationError) => {
  if (err.response && err.response.status === 422) {
    const cfg = err.config.appValidationError

    if (cfg == null) {
      toast('Some fields were not properly provided.')
    } else if (typeof cfg === 'string') {
      toast(cfg)
    }
  }

  return err
})