is main.js replaced by boot files in Quasar ?

Incremental

I migrate a vue.js app to Quasar and I have in the main.js, some code retrieving data from the server during the initialization.

Is the right place to do the same in a boot file ?
and how ?
Thanks

metalsadman

@incremental yes, it’s mentioned https://quasar.dev/quasar-cli/boot-files#Introduction.

Incremental

Well I made the following init.js file and declared it in quasar.conf.js

export default async ({ store }) => {
    // INITIALISATIONS
    console.log("boot/init.js");
    store.commit("API_DATA_PENDING"); // Sets `state.loading` to true -> Show a spinner or something.
    store.dispatch("getApplicationsASync");
}

When I run the code, I get the console.log : “boot/init.js” --> my boot file is executed
but also :
[vuex] unknown mutation type: API_DATA_PENDING
[vuex] unknown action type: getApplicationsASync

mutation and action are in /src/store/server.js
I tried to import the file without success…

beets

@incremental If you’re using the default quasar setup, your vuex store is namespaced, so you would have to do:

export default async ({ store }) => {
    // INITIALISATIONS
    console.log("boot/init.js");
    store.commit("example/API_DATA_PENDING"); // Sets `state.loading` to true -> Show a spinner or something.
    store.dispatch("example/getApplicationsASync");
}

If that’s not the case, have you tried

this.$store.commit('API_DATA_PENDING');

from a vue component? if that doesn’t work then neither would the boot action (without using a namespace like above)

Incremental

Thanks a lot beets !
I use a default quasar setup.
My mutation and action are in /src/store/server.js
It worked with :

store.commit("server/API_DATA_PENDING");

Incremental

sorry, but now I get : Uncaught (in promise) TypeError: error.response is undefined

and in getApplicationsASync() at :

    } catch (error) {

      ==> error: ReferenceError : "axios is not defined"

I tried to declare “axios” first in quasar.conf.js

boot: ["axios", "i18n", "constantes", "init"],

without success…
Is it because axios boot is not already “started” ???

beets

@incremental You would have to post your axios boot file and the store’s actions.js file (to see how axios is imported) to say for sure, I’m not sure I’ve ever ran into this specific problem to say for sure.

Incremental

@beets
Axios boot file :

import Vue from 'vue'
import axios from 'axios'

const axiosInstance = axios.create({
    //SERVER_URL: "http://192.168.0.3",
})

export default ({ store, Vue }) => {
    Vue.prototype.$axios = axiosInstance
    store.$axios = axiosInstance
}

Store server.js :

import { constantes } from "boot/constantes.js";
import { Notify } from 'quasar';

const actions = {
   async getApplicationsASync ({ commit }) {
      try {
         commit("API_DATA_PENDING");
         let response = await axios.get(
            constantes.SERVER_URL + "/ApplisByDomains"
         );
         commit("API_DATA_SUCCESS");
      } catch (error) {
         if (error.message === "Network Error") {
           ...

export default {
   namespaced: true,
   state,
   getters,
   mutations,
   actions
};

Let me know if you want more code, my file is quite big now…

beets

@incremental said in is main.js replaced by boot files in Quasar ?:

let response = await axios.get(

This line here should be

let response = await this.$axios.get(

Because you attach $axios to the store object, and just referring to it as axios is undefined.

Another way people do it is

boot file:

import Vue from 'vue'
import axios from 'axios'

const axiosInstance = axios.create({
    //SERVER_URL: "http://192.168.0.3",
})

export default ({ store, Vue }) => {
    Vue.prototype.$axios = axiosInstance
    store.$axios = axiosInstance
}

export { axiosInstance  }

Action:

import { constantes } from "boot/constantes.js";
import { Notify } from 'quasar';
import { axiosInstance } from 'boot/axios';

const actions = {
   async getApplicationsASync ({ commit }) {
      try {
         commit("API_DATA_PENDING");
         let response = await axiosInstance.get(
            constantes.SERVER_URL + "/ApplisByDomains"
         );
         commit("API_DATA_SUCCESS");
      } catch (error) {
         if (error.message === "Network Error") {
           ...

export default {
   namespaced: true,
   state,
   getters,
   mutations,
   actions
};

Incremental

@beets
Hello beets, I still have a question about syntax…
As my server.js code is quite long because of my APIs, I decided to simplify it and to create a function to handle axios error codes.

I modified my server.js with :

import { constantes } from "boot/constantes.js";
import { Notify } from 'quasar';

const mutations = {
   SET_SERVER_ERRORS: (state, serverErrors) => {
      state.serverErrors = serverErrors;
   },
},

const actions = {
   async getApplicationsASync ({ commit }) {
      try {
         commit("API_DATA_PENDING");
         let response = await axios.get(
            constantes.SERVER_URL + "/ApplisByDomains"
         );
         commit("API_DATA_SUCCESS");
      } catch (error) {
                  errors = errorMgt(error);
                  commit("API_DATA_FAILURE", errors);
      },
};

function errorMgt (error) {
   commit("SET_SERVER_ERRORS", null);
   console.log('Axios errors : ', errors);
   return errors;
};

export default {
   namespaced: true,
   state,
   getters,
   mutations,
   actions
};

Why do I get in errorMgt() an error “Uncaught (in promise) ReferenceError: commit is not defined” ?
I tried to use this.commit or this.$store.commit without success

beets

@incremental commit isn’t defined in function errorMgt. I’m not exactly sure what you’re intending to do with that function, since variable errors is also undefined. But if you wanted to use commit there, do something like:

      } catch (error) {
                  errors = errorMgt(error, commit); // pass commit function
                  commit("API_DATA_FAILURE", errors);
      }

function errorMgt (error, commit) { // accept commit as a parameter
   commit("SET_SERVER_ERRORS", null);
   console.log('Axios errors : ', errors);
   return errors;
};

Incremental

@beets
I haven’t pasted all the code. The idea is to factorise all the same axios error mgt among all my API calls.

You’re right, the errors variable was undefined…
I was missing the commit in the call !
Like for getApplicationsASync() syntax, I tried previously :

function errorMgt ({ commit }, error) {}

it works now with :

function errorMgt (commit, error) {}

What is the difference with { } ???

beets

@incremental The {} is called destructuring assignment. In a nutshell, if you defined:

function errorMgt ({ commit }, error) {}

Then you’d call it like:

errorMgt ({ commit }, error)
// or

const someObj = {
  commit: commit
}
errorMgt (someObj, error)

Incremental

@beets I understand that it permit to chose a parameter in an array at the call.
It’s unnecessary in my case.
Thanks a lot for your great help and explanations. People like you makes others to progress !!!
Thanks again

No More Posting New Topics!

is main.js replaced by boot files in Quasar ?