Firebase snapshot from import module

Ionic Framework Ionic Vue
1

Not sure if that subject even makes sense. So I’ve moved all my Firebase methods into a TypeScript file /src/hooks/firebase.ts based on a few examples I’ve seen from @aaronksaunders.

Now the rest of my code is still Vue 2 looking even though I’m riding on Vue 3 (not using the composition API as the code is more complex that way). What I am looking to do is update some parts of the UI when a Firebase snapshot live updates inside the method getDeviceInfo which is inside the firebase.ts file. Is that even possible?

import useFirebase from '../hooks/firebase';
const {getDeviceInfo} = useFirebase();
2

would need to see some code, but it can be as simple as making the object that contains the information observable or a ref

Reactivity Fundamentals | Vue.js (vuejs.org)

3

I don’t have any code specifically, but looking at your code you like to include “hooks” folders with Firebase files which keeps everything Firebase related in those files:
https://github.com/aaronksaunders/ionic-vue3-sample-3/tree/master/src/hooks

So how would one listen to Firestore changes when their Firestore code is in hooks but their actual code is in /Views folder?
https://firebase.google.com/docs/firestore/query-data/listen

I’ll check into observable or ref’s to see if this is what I need.

4

Here is my Stack Overflow where I said the same thing but different. Hopefully this helps!

5

i responded in stackoverflow…

but the gist is that the returnObject should be a state variable

6

Ok that was my backup plan. Up until now I haven’t needed state in the app I’m building. I was really waiting on Vuexfire to come back to life so I could use it to have state with real-time updating but they haven’t touched the project in 2 months and no Vue 3 support. Do you have any examples of Vuex state within a Vue 3 ionic app?

7

you don’t need vuex, I just need to see more of the code… below is the basic idea.

i the example you provided

const {state, getLiveDeviceInfo, deviceInfo} = useFirebaseService();

what is state??

all you need to do is create a ref and set the value in the ref and when it changes, any dependent components will re-render.

const deviceInfo = ref<any>(null);

const getLiveDeviceInfo = async (id: string) => {
    return await new Promise(function (resolve) {
      let returnObj = {};
      const threadMembersRef = firebase.firestore().collection('devices').doc(id);
      threadMembersRef.onSnapshot(function (doc) {
        Object.assign(returnObj, doc.data());
        deviceInfo.value = returnObj;
        resolve(returnObj);
      });
    });
};
8

I was finally able to get it working when I was in the middle of creating an example repo for you! :joy:

Here is my simplified code:

const deviceInfo = ref<any>(null);
let liveLook: { (): void; (): void };

const getLiveDeviceInfo = (id: string) => {
	liveLook = firebase.firestore().collection('devices').doc(id).onSnapshot(function(doc) {
			const returnObj = doc.data() as any;
			deviceInfo.value = returnObj;
			}
		);
	};

const endLiveDeviceInfo = () => {
	liveLook();
};

One major thing I was doing wrong was passing the function (getLiveDeviceInfo) and trying to get the return from it rather than passing the value to a variable (deviceInfo) and then returning that. So thanks for showing me that!

1 Like