AngularFire and Firestore – Querying collection once whilst navigating components

I’m trying reduce the reads performed against my firestore database. In a small demo, I have two components.

Component 1

Component 1 is a list of artists stored in the firestore collection company/artists

Component 2

Component 2 is a list of albums from any artist stored in the firestore collection company/albums

I connect an artist to an album by having the artist_id listed in each album document.

I have a service that’s referenced in a component. The service contains an angularfire collection query which i initiate within the service constructor. I put a console log inside the query function to log when the function is called. I essentially want the albums query to only happen once, even when I navigate back a to the artists component and return, I don’t want it to fire again. If I new item is added to the list, I’d like that to sync, which it does.

However, right now even though the console.log('get all items called'); is only fired once as i navigate through the components, the console.log('data = ', data) is fired every time I go to the albums component, which makes me think that I am indeed querying the database everytime.

Questions

  1. How do i make sure that this query is only run once?
  2. How do I achieve question 1, but also sync any new changes to the list from the database?
  3. Or have I actually done it correctly?

Albums Component

import { Component, OnInit } from '@angular/core';
import { AlbumItemsService } from '../services/category-items.service';

@Component({
   selector: 'app-album-items',
   templateUrl: './album-items.component.html',
   styleUrls: ['./album-items.component.css']
 })

export class AlbumItemsComponent implements OnInit {
  constructor(public albumItemsService: AlbumItemsService) { }
  ngOnInit(): void {}
}

Service

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class AlbumItemsService {

   private itemsCollection: AngularFirestoreCollection<any>;
   items: Observable<any[]>;

   constructor(private afs: AngularFirestore) { 
     console.log('Album Item Service Called')
     this.getAllItems();
   }

   getAllItems(){
      console.log('get all items called');
      this.itemsCollection = this.afs.collection<any>('url');
      this.items = this.itemsCollection.snapshotChanges().pipe(
         map(actions => actions.map(a => {
         const data = a.payload.doc.data();
         const id = a.payload.doc.id;
         console.log('data = ', data)
         return { id, ...data };
      }))
  );
 }
}

HTML

<ul>
  <li *ngFor="let item of AlbumItemsService.items | async">
    {{ item.item_title }}
  </li>
</ul>

Source: New feed
Source Url AngularFire and Firestore – Querying collection once whilst navigating components