Retrieve data from Firestore once upon initialization of the app, and share it from that point forward

Question

Retrieve data from Firestore once upon initialization of the app, and share it from that point forward

Previously, I utilized a mock that contained an array as the source of data for my entire app by iterating through it. The process worked well.

export const CASES: Case[] = [
  { id: 0,
    name: 'Diesel',
    portfolioImage: '/assets/images/portfolio/diesel.png',
    image: '/assets/images/diesel.jpg',
    image2: '/assets/images/diesel/diesel-sunflower.png',
    image3: '/assets/images/diesel/diesel-cap.png',
    link: '/cases/diesel',
    header: 'black'
  },

  { id: 1,
    name: 'WeWork Berlin',
    portfolioImage: '/assets/images/portfolio/berlin.png',
    image: '/assets/images/berlin.jpg',
    image2: '/assets/images/wework/berlin-logo.png',
    image3: '/assets/images/wework/berlin-building.png',
    link: '/cases/wework',
    header: 'white'
  }
];

Now, I am in the process of integrating my app with Firestore. To retrieve data from Firestore, I have implemented the following code within my desired component:

export class PortfolioComponent implements OnInit {

  cases;

  constructor(private db: AngularFirestore) { }

  ngOnInit() {
    this.db.collection('entries').valueChanges()
      .subscribe(val => this.cases = val);
  }

}

The current setup works, but my goal is to make this call only once - specifically, finding a way to fetch the data during app initialization...

and either merge it with the previous mock dataset,
or store the data in an array accessible globally

By doing this, my aim is to minimize fetching the data repeatedly and instead retrieve it once, consolidate it, and distribute it accordingly. Similar to how I managed it before integrating Firestore.

angular typescript firebase google-cloud-firestore

Answer 1

Answer №1

To retrieve data upon app initialization, the recommended approach is to utilize APP_INITIALIZER, which is a built-in instance of InjectionToken. An example implementation in app.module.ts would look like this:

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AppInitService } from './app-init.service';

export function initializeApp1(appInitService: AppInitService) {
  return (): Promise<any> => { 
    return appInitService.Init();
  }
}

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [ 
    AppInitService,
    { provide: APP_INITIALIZER,useFactory: initializeApp1, deps: [AppInitService], multi: true}
  ],
})
export class AppModule { }

Within your AppInitService, ensure that your data fetching request is made and stored properly. If you are using NGRX, store the data there, otherwise use a singleton root service. Make sure to return a promise that will resolve once the data is fetched.

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

@Injectable({
  providedIn: 'root'
})
export class AppInitService {

  constructor(private db: AngularFirestore, private dataService: DataService) { }

  Init(): Promise<any> {
     return new Promise((resolve, reject) => {
this.db.collection('entries').valueChanges()
      .subscribe(val => {
         this.dataService.data = val;
         resolve(true);
      });
     })
  }
}

After setting up the initialization process, inject dataService: DataService wherever needed to access the stored data.

Answer 2

To retrieve data upon app initialization, the recommended approach is to utilize APP_INITIALIZER, which is a built-in instance of InjectionToken. An example implementation in app.module.ts would look like this:

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AppInitService } from './app-init.service';

export function initializeApp1(appInitService: AppInitService) {
  return (): Promise<any> => { 
    return appInitService.Init();
  }
}

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [ 
    AppInitService,
    { provide: APP_INITIALIZER,useFactory: initializeApp1, deps: [AppInitService], multi: true}
  ],
})
export class AppModule { }

Within your AppInitService, ensure that your data fetching request is made and stored properly. If you are using NGRX, store the data there, otherwise use a singleton root service. Make sure to return a promise that will resolve once the data is fetched.

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

@Injectable({
  providedIn: 'root'
})
export class AppInitService {

  constructor(private db: AngularFirestore, private dataService: DataService) { }

  Init(): Promise<any> {
     return new Promise((resolve, reject) => {
this.db.collection('entries').valueChanges()
      .subscribe(val => {
         this.dataService.data = val;
         resolve(true);
      });
     })
  }
}

After setting up the initialization process, inject dataService: DataService wherever needed to access the stored data.

Retrieve data from Firestore once upon initialization of the app, and share it from that point forward

Answer №1

Similar questions

npm-bundle encounters an issue with Error: ENOENT when it cannot find the file or directory specified as 'package.json'

Struggling to locate root directory post-Angular 13 upgrade in Jest

Encountering unproductive errors with custom editor extension in VS Code

Is it possible to create a Cypress report that only includes the successful test cases and excludes the failed ones?

"Exploring the Depths of Angular with Google Maps and Karma

When sending a Post Request in Angular to a Spring Boot backend, a status code of 500 is

class-validator: ensures the correct number of digits are present in numeric values

An error with code -4058 is preventing the installation of npm packages when running the 'npm install' command after using 'ng new'

Creating sparse fieldset URL query parameters using JavaScript

The index declaration file has not been uploaded to NPM

How to display an object in the template that does not have a specified property

The parameters 'event' and 'event' are not compatible with each other due to their different types

Change the default icon in mat-stepper angular material

The function res.send() is returning a null object

Idea fails to detect imports

Can a custom structural directive be utilized under certain circumstances within Angular?

Disabling lint in a PhpStorm or WebStorm project with angular-cli

Is there a way for me to determine the version of Angular that I am currently using?

Leveraging the power of Google functionality in combination with Node.js, Express,

Creating encoded objects for a content-type of `application/x-www-form-urlencoded`