improve openDBChannel docs

[mesqueeb]

1. Show the difference between native solution vs my library

store.dispatch('myModule/openDBChannel')

is the same as

firebase.firestore().collection('path/to/collection')
  .onSnapshot(doc => {
    const docData = doc.data()
    // add/modify/remove the document data in Vuex
  })

My library adds these quality of life features:

• Automatic organisation of the docs inside your Vuex module
• Hooks
• Set default values that are added

2. Add explanation to the documentation on Firestore's onSnapshot behaviour with a where filter:

Beware with where-filters with listeners! The default Firebase behaviour is that it will send out a "removed" event as soon as the document does not adhere to your where conditions anymore!

store.dispatch('myCollectionModule/openDBChannel', {where: [['someField', '==', true]]})
// your module will automatically be loaded with the documents who have `someField` set to `true`

store.dispatch('myCollectionModule/set', {id: '123', someField: false})
// 1. your document is synced with firebase &
// does not adhere to the listener's where condition anymore
// 2. Firebase launches a 'removed' event

In the above example we see that Firebase will send out a "removed" event, even though the document still exists! Because of this behaviour you need to be very careful with where filters!

If you want to keep your document in vuex

You can keep the document in your Vuex and prevent the 'removed' event by not calling updateStore inside the removedHook:

serverChange: {
  removedHook: function (updateStore, doc, id, store) {
      // do not call updateStore
  }
}

openDBChannel error

The library will throw an error if you try to dispatch openDBChannel twice, unless if you change the pathVariables or where filters like so:

openDBChannel was already called for these filters and pathvariables. Identifier: [where][orderBy][pathVariables]{}

To avoid an error being thrown in the console, the code can be written like:

    try {
      dispatch('events/openDBChannel')
   } catch (e) {
     // Do nothing. Because the channel is already open.
   }

[Fulbert]

Hi,

There's also something else that is not clear for me about openDBChannel. With this code, it looks like it's not adding to the store new calls added after openDBChannel. I'm not sure why... Missing %convertTimestamp% ?

const notifications = {
  state: {
    data: {}
  },
  sync: {
    where: [
      ['created_at', '>=', new Date()]
    ]
  },
  vue: false,
  readRoles: ['user'],
  writeRoles: ['admin'],
  namespaced: true,
  firestorePath: 'notifications',
  firestoreRefType: 'collection',
  moduleName: 'notifications',
  statePropName: 'data'
}

[mesqueeb]

@Fulbert Sorry I missed this comment!

I'm not sure what you exactly mean with

"it looks like it's not adding to the store new calls added after openDBChannel."

It's also kind of unrelated to this issue. Please open a new one, and try to explain a little bit more! 😉

[mesqueeb]

---

After about two years of open source, I finally got accepted for Github Sponsors!

💜 github.com/sponsors/mesqueeb 💜

A little about me:

• I love open-source
• 6 months ago I got a son, and am trying to be an awesome father 😅
• I'm doing freelance work here and there as my main job

If anyone was helped with vuex-easy-firestore, I'd greatly appreciate any support!

BTW, donations get's paid DOUBLE by GitHub! (they're alchemists... 🦾)

Going forward 👨🏼‍💻

• I got great plans for the future of vuex-easy-firestore going above and beyond!! Look forward to it!!
• On to many more years of open-sourcing! 🎉