Vuefire: Vuexfire duplicated objects returned when using collection.

[cairinmichie]

I am trying to bind a collection with a where query. However, each time I bind the collection it returns an array with duplicated results as following:

[{Object 1 relating to doc 1},
{Object 2 relating to doc 2},
{Object 2 relating to doc 2},
{Object 1 relating to doc 1}]

The code I am using is the following:

// In my vuex store
const actions = {
  setEnquiriesRef: firebaseAction((context, ref) => {
    context.bindFirebaseRef('enquiries', ref).then((val) => {
      console.log('enquiries bound', val) // This val gives the output above, and is the same as the bound value
    })
  })
}

// In my vue component where I call the function:
let ref = firestore.collection('enquiries').where('uid', '==', 'Relevant uid')
this.$store.dispatch('setEnquiriesRef', ref)

Some notes:

• If the ref is a document it works as expected.
• If the ref is a collection without the where query the same duplication happens.
• This is using "vuexfire": "^3.0.0-alpha.14"
• If i simply run a one-time get on that reference it returns the correct data as expected (Not duplicated).
• It always loads the documents in a particular order (Either default or with orderBy), and the duplicates are always the reverse of this.

[posva]

Hey can you produce a boiled down repro so I can check please?

[cairinmichie]

I can't apparently... I created a codepen with the basic functionality and it worked fine. So I'm a bit stumped. The implementation in the codepen was essentially the same code.

I will update this if I manage to find what is breaking it. So far I have updated all dependancies, and uninstalled/reinstalled most of them to no avail.

This is my package.json (not sure if anything in here breaks it):

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "firebase": "^5.8.5",
    "vue": "^2.6.8",
    "vue-router": "^3.0.1",
    "vue2-touch-events": "^1.1.2",
    "vuex": "^3.1.0",
    "vuexfire": "^3.0.0-alpha.14"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.4.1",
    "@vue/cli-plugin-eslint": "^3.4.1",
    "@vue/cli-service": "^3.4.1",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.15.1",
    "eslint-plugin-vue": "^5.2.2",
    "vue-template-compiler": "^2.6.8"
  }
}

[posva]

okay, no worries, keep me updated if you manage to reproduce!

[cairinmichie]

Update: I wasn't understanding how the firebaseMutations were being registered, so I was adding them to each of my modules in my store. Which is obviously unnecessary and was causing the duplicate.

[posva]

glad you found a solution, thanks for sharing back!

[bradintheusa]

In case someone else lands here I had called '...vuexfireMutations' from multiple places. Resolving that fixed the duplicates for me.