Async code in App Plugins

John

hello,

so I’m in the process of migrating from 14.1 to 15.8 and trying to move some initialization code over to ‘App Plugins’. I’m using vue-apollo and previously I was adapting ‘main.js’ in order to first setup and then pass the ‘ApolloProvider’ object to Vue.
I’m trying to move this code to a separate plugin now. However, I doubt this actually makes sense, since I’m executing some ajax calls during setup of Apollo and ‘App plugins’ seem not to take this possibility into account. They do not expect a promise, but rather simply execute the exported default function. So my only possibility would be to make this function block and wait for reponses (or timeout). But maybe I just miss something.
How should we deal with async code in ‘App plugins’?

Greetings,
John

Slade

If you really need async calls to initialize your plugin you should look at the boot plugin : http://quasar-framework.org/guide/app-plugins.html#Special-App-Plugin-Boot

This is a special plugin that let’s you launch the app when your are ready, after recieving the ajax callback in your case.

John

hi Slade,

thanks I will try. Async code during initialization, is it that uncommon?

John

Slade

I don’t have enough Vue or Quasar experience to say if it is right or wong to do that. I even did it using the boot plugin at first, but it felt dirty. So i changed my code and used the vuex store on the beforeMount event of my app.

zmilan

I have just found this thread. I’m new to quasar and I was need ajax call to validate token found in localStorage. I failed to do it with regular plugin and I searched for solution. @Slade suggestion to add it to “boot” plugin works really good. Is there something that I’m missing or doing wrong with this approach?

benoitranque

@zmilan just make sure you read the corresponding docs. The boot plugin is special

zmilan

@benoitranque yes I read it and I understand that part. My code works exactly like I expected, but what I’m asking is there some “hidden” things that I don’t see at the moment about this usage.
Here is complete boot plugin code:
import api from ‘src/api’

// leave the export, even if you don’t use it
export default ({ app, store, Vue }) => {
let tokenKey = api.getTokenKey()
let token = localStorage.getItem(tokenKey)
// assign api to Vue for easier access, like this.$api
Vue.prototype.$api = api

if (!token || token === ‘undefined’) {
/* eslint-disable-next-line no-new */
new Vue(app)
}

api.checkToken(token)
.then(() => {
store.commit(‘apiAuth/changeIsGuest’, { status: false }, { root: true })
store.commit(‘apiAuth/changeToken’, { token: token, store: false }, { root: true })
})
.catch(() => {
// we wish to remove token so we don’t need to check it again on page refresh
localStorage.removeItem(tokenKey)
})
.finally(() => {
/* eslint-disable-next-line no-new */
new Vue(app)
})
}

Thanks in advance for any suggestion

No More Posting New Topics!

Async code in App Plugins