Using a bootfile inside a bootfile

[bernhardh]

I have currently two bootfiles.

One which initializes notify, so that I can use `this.$notify.msg("Hello Wordl") in my Vue files:

import { Notify } from 'quasar'

const notify = Notify;

export default async ({ app }) => {
  app.config.globalProperties.$notify = {
    msg(title, msg, type) {
      notify.create({
        message: title + (msg ? '<div class="text-caption">' + msg + '</div>' : ''),
        type: type || "error",
        html: true
      })
    }
  }
}

and one which does the api/axios stuff:

import { boot } from 'quasar/wrappers'
import axios from 'axios'

// Create axios instance for api
const api = axios.create({
  baseURL: process.env.API_URL,
  withCredentials: true,
})

export default boot(({ app }) => {
  app.config.globalProperties.$axios = axios
  app.config.globalProperties.$api = api
})

export { axios, api }

and this setup works.

Now I wanna add a "global" interceptor for axios (inside the axios bootfile), to show an error notification on each error. Something like this:

api.interceptors.response.use((response) => response, (error) => {
    notify.msg("An error occured", error.message);
});

Then interceptor is working (i can console.log(error.message)) but of course, I can't access notify.

I already tried to add import notify from './notify' or to access the app variable (from the export default boot), but I have only access to error inside this function.

Any ideas?

[metalsadman]

@bernhardh try:

// boot/notify.js
import { Notify } from 'quasar'

const notify = {
    msg(title, msg, type) {
      Notify.create({
        message: title + (msg ? '<div class="text-caption">' + msg + '</div>' : ''),
        type: type || "error",
        html: true
      })
    }
  }

export default async ({ app }) => {
  app.config.globalProperties.$notify = notify
}

export { notify } // <--- notice the export

// boot/axios.js
import { notify } from 'boot/notify'
...
api.interceptors.response.use((response) => response, (error) => {
    notify.msg("An error occured", error.message);
});
...

[bernhardh]

Thank you very much!

[bernhardh]

Just one question - maybe you know this.

How to run this interceptor only if there is no other catch block? I mean, I dont wanna get the "An error occured" notifcation, if I handle the error with an catch block.

this.api
  .post(...)
  .then(...)
  .catch(error => {
      console.log("test")
  })

Will show both - the notification and the console.log.

Is there some kind of stop propagation method, so that I would only see the console message and not the notifcation, since this is the more "specific" error handling and the notification should only be the "fallback" error handling.

[metalsadman]

axios request or response interceptors has 2 callbacks, one for success and one for handling errors.
ie. axios.interceptors.request.use(onRequestHandler, onRequestErrorHandler) see their docs https://github.com/axios/axios#interceptors. then don't handle it in your interceptor and just return a Promise.reject(error), which will be handled by your axios catch block.
something like:

api.interceptors.response.use((response) => response, (error) => {
    // console.log `error` to see the full object, you can check on error.response , error.code etc...
    if(error.response ...) { // check something on the error response data
      // only show a notify base on your condition
      notify.msg("An error occured", error.message);
    }
   return Promise.reject(error) // fall through caller's catch block
});

error has several properties see: https://github.com/axios/axios#handling-errors