Quasar: Store instance in pages/component is not effected by client run of boot files

[Khan294]

Platform:
OS: Windows 10
Node: 10.16.0
NPM: 6.9.0
Browsers: Chrome

Bug
Store instance (this.$store) in pages and components is not effected by the changes made when boot files run on the client side.

Description
I am trying to initialize some default store states which I will be using throughout the site. To do this I have some code in a boot file (initiate.js) which runs twice, first for the server and then client side. On client side there can be other calculations which will modify some of these states again.

This is from my boot file

Server log for that state shows the expected value

First log on client is also according to the expected output.
But state log on page shows the output from the server as if client side boot changes are not effecting data for home page.

[rstoenescu]

Hi,

Your description requires more details, but regardless, putting some thoughts of what I think may be a problem with your code:

• Should you need, you can set boot files to run only server-side or only client-side (if you fill vuex state from server-side then there's no need to redo it from client-side)

// quasar.conf.js
boot: [
  {
    server: false, // run on client-side only!
    path: '<name>' // references /src/boot/<name>.js
  },
  {
    client: false, // run on server-side only!
    path: '<name>' // references /src/boot/<name>.js
  }
]

• if your vuex action is asynchronous (store.dispatch(...)) then you need to wait for it to be fulfilled; boot files allow you to have asynchronous operations; if the vuex action is async and you don't wait for it, then your vuex state will not be in good condition;

export default ({ .... }) {
  // ...
  return /* a Promise */ store.dispatch(....).then(() => { /* ...the rest... */ })
}

OR

export default async ({ .... }) {
  // ...
  await store.dispatch(.....)
  // ...the rest...
}

[Khan294]

Still not working.

Tried both thing on a fresh installation with these configurations

First I created my store like this

Then added a client side boot file

And consoled before and after waiting for dispatch to return results

And finally consoled state in page mounted function

But no luck same result

Code is available here

[rstoenescu]

Fix will be available in “@quasar/app” v 1.3.8

[doorkey]

Thank you so much.

[dmitry]

@rstoenescu after this change our application will have an issue, because we are using apollo as our store and it initialized only while the boot.

I see that normally store initialized before all the boot files, but apollo cannot be initialized because we need router and ssrContext which are only can be accessed in the boot. For this trick store wrapper is initialized inside the store.js and then it continues to initialize completely inside the boot file apollo.js.

One of the solutions might be to use different replaceState(window.__INITIAL_STATE__) when not using store at all, but in that case the problem is template, which is not allowing to add __INITIAL_STATE__ or other variable inside the template in the HEAD tag. Solution doesn't work completely fine, especially when starting to use cordova (it shows javascript data before the splashscreen).

Would be really great to be on the edge of quasar for our application, but this change is breaking our apollo integration. Please, lets find the solution to it.

[dmitry]

One of the easiest solutions might be to hydrate data manually, instead of automatic way before the boot files. So would be great to have some flag, which can switch on/off the data hydration inside the client-entry.js.