How to update a Vue "ref" with Firebase "onSnapshot" listener values?

0

Issue

I have a Vue composable that uses a Firebase onSnapshot listener.

When data changes on that listener I want it to update a ref named documentsArray.

When I console.log the documentsArray inside the onSnapshot function it seems to be working because it contains an array of values. But when I console.log outside the onSnapshot function the array is empty.

Why is this happening?

The console.log outside the onSnapshot function should also contain the array of values.

Here is my composable (I am using TypeScript):

import { ref, Ref, watchEffect } from "vue";
import { projectFirestore } from "@/firebase/config";
import {
  collection,
  query,
  orderBy,
  onSnapshot,
  DocumentData,
  Timestamp,
} from "firebase/firestore";

interface Document {
  id: string;
  message: string;
  name: string;
  createdAt: Timestamp;
}

const getCollection = (
  collectionString: string
): {
  documentsArray: Ref<Document[] | null>;
  error: Ref<string | null>;
} => {
  const documentsArray = ref<Document[] | null>(null);
  const error = ref<string | null>(null);
  const colRef = collection(projectFirestore, collectionString);
  const colRefOrdered = query(colRef, orderBy("createdAt"));

  const unsubscribe = onSnapshot(
    colRefOrdered,
    (snap) => {
      const results: Document[] = [];
      snap.docs.forEach((doc: DocumentData) => {
        doc.data().createdAt && //Ensures the server timestamp has been added
          results.push({
            ...doc.data(),
            id: doc.id,
          });
      });
      documentsArray.value = results;
      console.log("documentsArray.value inside snapshot", documentsArray.value); //<-- This works. It prints an array of documents.
      error.value = null;
    },
    (err) => {
      console.log(err.message);
      documentsArray.value = null;
      error.value = "could not fetch data";
    }
  );
  watchEffect((onInvalidate) => {
    onInvalidate(() => {
      unsubscribe();
    });
  });
  console.log("documentsArray.value outside snapshot", documentsArray.value); //<-- This does not work. It prints an empty array.
  return { documentsArray, error };
};

export default getCollection;

Solution

The code inside the onSnapshot callback is run asynchronously (after running the code outside the callback), in order to see the changes outside function you’ve to create a watcher to see that changes:

import import { ref, Ref, watchEffect, watch } from "vue";

....
  const unsubscribe = onSnapshot(
    colRefOrdered,
    (snap) => {
      ...
  );

watch(documentsArray,(newVal,oldVal){
  console.log("documentsArray.value outside snapshot", documentsArray.value);

},{deep:true})

Answered By – Boussadjra Brahim

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More