How to display a snackbar when axios interceptor gets an error

Viewed 624

I am trying to show a snackbar everytime my axios interceptor gets an error. Until now I didnt't figure out where do I put my snackbar to be visible in any page of my project when somenthing bad happens in my requests.

This is my api.js file, all my components use the apiSecure method

import axios from "axios";
import { ResetTokenAndReattemptRequest } from "domain/auth/AuthService";

const api = axios.create({
    baseURL: process.env.REACT_APP_API_URL,
    headers: {
        "Content-Type": "application/json",
    },
});

export const apiSecure = axios.create({
    baseURL: process.env.REACT_APP_API_URL,
    headers: {
        Authorization: "Bearer " + localStorage.getItem("Token"),
        "Content-Type": "application/json",
    },
});
    
export default api;

apiSecure.interceptors.response.use(
    function (response) {
        return response;
    },
    function (error) {
        const access_token = localStorage.getItem("Token");
        if (error.response.status === 401 && access_token) {
            return ResetTokenAndReattemptRequest(error);
        } else {
            console.error(error);
            // Here I would like to call my Snackbar to be shown in any page of my application
        }
        return Promise.reject(error);
    }
);

Thank you all.

0 Answers
Related