Qfyilyi

I'm trying to create a firebase application, but something happens whenever I refresh the page.

PLACEHOLDER is an ion-item filled with data retrieved from a firebase.firestore.CollectionReference bookListRef that is maintained within a service known as BooksService, and its method the page calls is getBookEntries(bookId).

import { Injectable } from '@angular/core';

import * as firebase from 'firebase/app'; 

import 'firebase/auth'; 

import 'firebase/firestore'; 

import 'firebase/storage';



@Injectable({

  providedIn: 'root'

})

export class BooksService {

  public bookListRef: firebase.firestore.CollectionReference;

  constructor() {

    firebase.auth().onAuthStateChanged(user => { 

      if (user) { 

        this.bookListRef = firebase.firestore().collection(`/bookList`); 

        console.log(this.bookListRef);

      } 

    }); 

  }



  addBook(authorName: string, bookTitle: string, edition: string): Promise<firebase.firestore.DocumentReference>{

     return this.bookListRef.add({

      authorLastName: authorName,

      title: bookTitle,

      edition: edition

    }).then((bookRef)=> 

              bookRef.collection("Entries").add({

                                                  page: "PLACEHOLDER",

                                               })



      );





    }



  getBookList(authorLastName): firebase.firestore.Query{

    return this.bookListRef.where("authorLastName", "==", authorLastName);

  }



  getBookEntries(bookId: string): firebase.firestore.CollectionReference{



        return this.bookListRef.doc(bookId).collection("Entries"); 

    }

  }

}

When I first load the page, the PLACEHOLDER data is loaded just fine. But when I refresh the page, the bookListRef on which getBookEntries(bookId) performs the query is undefined. By inserting console.log statements throughout the code, I found that getBookEntries method would execute before the constructor had finished initializing the bookListRef. What's really puzzling is that I'm following Javabratt's firestore tutorial EventManager section, and this behaviour doesn't come up. I can't find any fundamental differences in the way our respective services are written, nor in how our pages call those services. I added console.log statements to his example, and somehow his constructor is completing the firebase query and initializing eventListRef before the getEventDetail() has to operate on it.

The rest of the post details my efforts to make this work, and is skippable.
Thank you for reading.

I've been trying to find a way to ensure that getBookEntries(bookId) doesn't start executing until after the constructor finishes. I tried using a while loop to stall the getBookEntries(bookId) until initialization had happened, but control never left the loop and I was left with a freezing memory hog. I looked into await/async but that can't be used on a constructor, and ngOnInit can't be used in services.