steveclarke/quasar-firebase-example

A Quasar / Vue reference app that connects to Firebase.

quasar-firebase-example's Issues

[Request] Firestore + Vuex integration example

Thank you once again for this wonderful example library on Firebase and Quasar.
I want to suggest adding a link to this repo in the Quasar documentation somewhere.

I’m trying to figure out what the best way is to use firestore with the vuex store. So I want to request if possible an extra module on the best integration with firestore and vuex.

Currently what I’m most struggling is the way I’m opening the firestore channel and pulling the records into the vuex store:
I created an action called ‘openDBChannel’ which goes to grab the data and replacing the state.

    openDBChannel ({getters, commit}) {
      getters.userSettingsDoc.onSnapshot(doc => {
        if (!doc.exists) { return }
        let source = doc.metadata.hasPendingWrites ? 'Local' : 'Server'
        if (source === 'Server') {
          commit('replaceSettings', doc.data().settings)
        }
      }, error => {
        let message = rootGetters.text.api.connectionError
        notify({message, preset: 'error'})
      })
    },
    // this is for one type of document. I'm doing it a couple more times for docs from other collections.

My questions:

1. The downside is that the store has no data until I have opened this DBChannel. This is bad because it’s more difficult for me to cache data etc. Every time the user opens the page (even if the data is cached by firebase) it has to be put back into the vuex store after which it will start rendering the data…
   I would prefer to eg. retrieve the firebase data first, then create the vuex store WITH the data already there. Is this possible?

2. I’m saving my document references inside getters (getters.userSettingsDoc). Is there any better way to do this?

3. I basically manually created a patch action in the store for each kind of patching I would do to the firestore. Is there any recommended way to patch changes that are made to the vuex store state?

Question about 'auth' plugin

Dear Steve,

Thanks so much for this great library!
I'm a bit confused about this line in the 'auth' plugin:
let authRequired = to.matched.some(route => route.meta.authRequired)

1. what is matched?
2. what about routes that don't have any meta object, won't it give an error: cannot read authRequired form undefined?

Deprecated plugin boot.js

The boot.js plugin is now deprecated, in favor of prefetch feature. However, it is not as effective as the boot.js plugin.
The migration guide is given below
https://medium.com/quasar-framework/updating-to-quasar-0-17-x-with-firebase-authentication-91c129606859
Still, with this method, I am not getting the same results. It suggests that we should add prefetch to every component for auth. I think there must be a better way. Can you try to integrate prefetch into this app keeping the results same?? Or at least suggest a better way here.