Duplicate API call when using beforeEnter

fetchData function is called twice everytime I’m trying to enter the route. I’ve searched everywhere but didn’t find anything. Any idea how to prevent it from being called twice ?

router.js :

async beforeEnter(to, from, next) {
   await store.dispatch("fetchData").then(() => {
       if (store.getters.isValid == false) {            
           next({
               name: "settings",
               });
           } else {
             next();
           }
        });
      },

idea1 : debouncefy api

async beforeEnter(debounce(function(to,from,next){
    await store.dispatch("fetchData)...
},300))

idea2: log to find who called this function

async beforeEnter((to,from,next){
  console.trace();
  await store.dispatch("fetchData")...
})

trace the log of console.trace(),find who called this

Thanks but it doesn’t give any help.

Console.log(trace) shows two duplicate calls coming from the same line which is beforeEnter => I knew that already.

Your debouncefy syntax doesn’t work.