AngularFire / Firestore-将集合和文档作为服务返回

Question

I have several pages that reference the same node in firestore, each pulling different segments from the firestore node. For example, a summary page might pull through album title, date, genre and image, whilst another page might pull through just the title, artist and record label. A couple of questions:

1. Is it possible to turn one of the firestore queries into a service?
2. If so, does that mean the data is only read once whilst navigating across different pages (angular components) that use the same service?
3. Will the query only run again when data is modified in firestore through the observable? (" return Observable.create(observer => { " )

I have tried a service with the code below. However, the issue observed is that on page refresh, the data isn't present. It is however present whilst navigating through the site. I believe this is because my page is running before the observable is returned. Is there a way to wrap up the query as an observable?

Any assistance would be greatly appreciated.

getAlbumData() {
  this.albumDoc = this.afs.doc(`albums/${this.albumId}`);
  this.album = this.albumDoc.snapshotChanges();
  this.album.subscribe((value) => {

    // The returned Data
    const data = value.payload.data();

    // Firebase Reference
    var storage = firebase.storage();

    // If album cover exists
    if (data.project_signature != undefined) {

      // Get the Image URL
      var image = data.album_cover_image;

      // Create an image reference to the storage location
      var imagePathReference = storage.ref().child(image);

      // Get the download URL and set the local variable to the result (url)
      imagePathReference.getDownloadURL().then((url) => {
        this.album_cover = url;
      });
    }
  });
}

Answer 1

When I build my observables, I try to use operators as much as I can until I get the data I want to display in my UI.

You don't want to implement too much code in the subscribe method because you break the reactive paradigm by doing so. Instead, extract you data in your observable and display it in your template. Don't forget to use the async pipe in your template to display your data when it gets fetched by your application.

I would do something like this:

// In AlbumService
getAlbumCover(albumId: string) {
    const albumDoc = this.afs.doc(`albums/${albumId}`);
    const album_cover$ = this.albumDoc.snapshotChanges().pipe(
      // get the album data from firestore request
      map(data => {
        return {
          id: data.payload.id,
          ...data.payload.data()
        };
      }),
      // emits data only if it contains a defined project_signature
      filter(album => album.project_signature),
      // prepare the imagePath and get the album cover from the promise
      mergeMap(album => {
        const storage = firebase.storage();
        const image = album.album_cover_image;
        const imagePathReference = storage.ref().child(image);
        return imagePathReference.getDownloadURL();
      })
    );
    return album_cover$;
  }

By doing so, when your data is updated in firestore, it will be fetched automatically by your application since you use an observable.

In your component, in the onInit() method after getting your album id from the url: this.album_cover$ = this.albumService.getAlbumCover(albumId);

Finally, in my template, I would do :

<div>{{album_cover$ | async}}</div>