Using Realtime DB and Firestore Refs together

Hi,

I’m trying to use both Firestore and RealtimeDB refs in my app simulataneously.

However when I initialise my Firebase Refs in the Firestore object on the Vue component I get an error.

export default {
    name: 'Summary',
    firestore:function(){
      return {
        posts: Firebase.firestore.collection('posts'),
        users: Firebase.realtimedb.ref('/users')
      }
   },
}

The error:

vuefire.esm.js?bbf5:334 Uncaught (in promise) TypeError: document.onSnapshot is not a function
    at bindDocument (vuefire.esm.js?bbf5:334)
    at eval (vuefire.esm.js?bbf5:371)
    at new Promise (<anonymous>)
    at bind (vuefire.esm.js?bbf5:360)
    at VueComponent.Vue.$bind (vuefire.esm.js?bbf5:420)
    at eval (vuefire.esm.js?bbf5:400)
    at Array.forEach (<anonymous>)
    at VueComponent.created (vuefire.esm.js?bbf5:399)
    at callHook (vue.esm.js?65d7:2921)
    at VueComponent.Vue._init (vue.esm.js?65d7:4630)

I also tried manually binding the refs in the vue component created() function like so:

created() {
   this.$bind('users', Firebase.realtimedb.ref('/users'))
}

Which results in the same error.

Am I doing something wrong? I’m just replicating the setup I had before using the Firestore branch of VueFire and beginning the migration of some of my Realtime DB calls.

Thanks

FYI if the naming of my Firebase objects is confusing. This is how my Firebase object is initialised:

  import _firebase from 'firebase'

  let config = {
     ...{{PROJECT SPECIFIC CONFIG}}
  };

let settings = {timestampsInSnapshots: true};

  let app = _firebase.initializeApp(config)
  let realtimedb = app.database();
  let firestore = app.firestore();
  firestore.settings(settings)

  var _signOut = function() {
    app.auth().signOut().then(function() {
      // Sign-out successful.
    }).catch(function(error) {
      // An error happened.
    });
  }

  export const Firebase = {
    app: app,
    realtimedb: realtimedb,
    firestore: firestore,
    instance: _firebase,
    signOut:_signOut

  };

[posva]

I added RTDB support for vuefire and still need to add it to vuexfire. I will like to get others opinion on API. Currently my plans (some are already done) are

• Replace default export from Vuefire to firestorePlugin
• Export rtdbPlugin for the RTDB
• Keep $bind for Firestore but make it configurable with options when installing firestorePlugin
• Use $rtdbBind for RTDB but make it configurable with options when installing rtdbPlugin
• same for $unbind / $rtdbUnbind. _The reasoning behind this is: I want to make it simpler by default for Firestore users as that database is more likely to be used
• Give access to used refs through $firebaseRefs / $firestoreRefs

This makes it possible to use only a fraction of Vuefire/Vuexfire as well as use them both:

import { firestorePlugin, rtdbPlugin } from 'vuefire'

// rename $bind -> $fsBind, $unbind -> $fsUnbind
Vue.use(firestorePlugin, { bindFnName: '$fsBind', unbindFnName: '$fsUnbind' })
// rename $rtdbBind -> $bind, $rtdbUnbind -> $unbind
Vue.use(rtdbPlugin, { bindFnName: '$bind', unbindFnName: '$unbind' })

new Vue({
  // for the RTDB, it is mandatory to use an array so binding binds as an array
  // Firestore doesn't need that because there is a clear difference between
  // documents and collections
  data: { items: [], item: null, fsItems: null, fsItem: null },
  firebase: { items: db.child('items'), item: db.child('item') },
  firestore: { items: fsdb.collection('items'), item: fsdb.collection('data').doc('item') },
})

[ryanpaulfyfe]

Thanks for quick response. I didn’t find the docs clear in this regard. Will work to figure it out now 👍