javascriptfirebaseionic-frameworkgoogle-cloud-firestoreionic-vue

Can't output data from Firebase in Ionic Vue iOS capacitor App


I am building an iOS app with Ionic Vue and using Firebase as a DB.

When I am running my app in the browser as pure JS code everything works fine. All of my DB queries return data as expected. When I run the same app in Xcode simulator my queries stop working. The only query that seem to return any data to console is GetDocs and forEach(doc)

Works both Web iOS ✅

// Function to log Firestore data
const logFirestoreData = async () => {
  try {
    const querySnapshot = await getDocs(collection(db, "habits"));
    querySnapshot.forEach((doc) => {
      console.log(`Document ID: ${doc.id}, Data: ${JSON.stringify(doc.data())}`);
    });
  } catch (error) {
    console.error("Error getting Firestore data:", error);
  }
};

Does not work iOS ❌ works on Web ✅

// Function to fetch habits and subscribe to changes
export const fetchHabits = async (itemsRef) => {
  const habitsCollection = collection(db, "habits");
  const habitsQuery = query(habitsCollection, orderBy("date", "asc")); // Adjust orderBy as per your requirement

  const unsubscribe = onSnapshot(habitsQuery, (snapshot) => {
    itemsRef.value = snapshot.docs.map((doc) => ({
      id: doc.id,
      date: doc.data().date,
      description: doc.data().description,
      name: doc.data().name,
      commited_days_this_week: doc.data().commited_days_this_week,
      days_this_week: doc.data().days_this_week,
      total_streak: doc.data().total_streak,
    }));
  });

  return unsubscribe;
};

But the moment I change this query to be more intelligent to use Where or OnSnapshot it does not log any errors or return any data. I just have an empty app with no records.


Solution

  • https://github.com/firebase/firebase-js-sdk/issues/5019#issuecomment-861761505

    const auth = initializeAuth(app, {
      persistence: browserLocalPersistence,  // This uses localStorage
    });
    

    This solution seems to have worked.