Allow customizing how the data is stored (id, adding properties, transforming them)

[posva]

Right now the data is created using https://github.com/vuejs/vuefire/blob/master/packages/%40posva/vuefire-core/src/utils.js#L9-L14

Looking at Firestore extensions like Geofirestore that add a distance property that is lost upon binding with Vuefire. This would allow adding the distance to the object bound. It would also allow customizing the key/id attribute although I still feel that having a simple string field is nice.

API

The api would be the same for firebase and firestore

Vue.use(firestorePlugin, {
  // override createsnapshot
  createSnapshot (doc) {
    return Object.defineProperty(doc.data(), 'id', {
      value: doc.id
    })
  }
})

this.$bind('item', { createSnapshot })
bindFirestoreRef('item', { createSnapshot })

It will also be nice to provide a way to override globally for vuexfire

[posva]

Closed in #302 This is now possible thanks to: https://vuefire.vuejs.org/api/vuefire.html#options-serialize

[mfissehaye]

How can I use this option in @nuxtjs/firebase

[posva]

that module is a different package, it doesn't seem to use vuefire at all

[mfissehaye]

It says it plays well with vuexfire in their docs. I was hoping if there was a way to pass some configuration options to vuexfire. And how do you import firestorePlugin in vuexfire as compared to vuefire.

[posva]

But you need to ask there on how to pass options to Vuefire

[mfissehaye]

Yes you are right. Thank you. However does this configuration work in vuexfire too because I couldn't import firestorePlugin from vuexfire. Isn't vuexfire the same thing as vuefire?

[mfissehaye]

I was able to pass the serialize option as described here to my vuexfire binding.

await bindFirestoreRef('products', products, {
      wait: true,
      serialize: snapshot => {
        return Object.defineProperty(snapshot.data(), 'id', {
          value: snapshot.id
        })
      }
    })

or globally by defining a nuxt plugin with the following content:

import { firestoreOptions } from 'vuexfire'

firestoreOptions.serialize = doc => {
  return Object.defineProperty(doc.data(), 'id', { value: doc.id })
}

Thank you for the awesome library

[mfissehaye]

When I pass an async function as serialize, it assigns nothing to the bound object.

serialize: async snapshot => {
        const rooms = await ... // make another request to firebase

        return {
          id: snapshot.id,
          rooms,
          ...snapshot.data()
        }
      }

Is there a workaround?