Why is my Angular app displaying outdated data from Firebase when navigating between pages?

Question

Why is my Angular app displaying outdated data from Firebase when navigating between pages?

Currently, I am dealing with an Angular 9 application that is hosted on Firebase and utilizes Firestore for its data storage. There is a perplexing issue that I haven't been able to figure out completely despite simplifying the app extensively. I will attempt to elucidate the problem below.

About the Application: The application consists of two main pages - Homepage and Transactions page. Both pages retrieve data from the "transactions" collection in Firebase. However, the homepage should display the 4 most recent transactions (sorted by date in descending order), while the Transactions page needs to show the 10 most profitable transactions (sorted by amount in descending order). Currently, I am logging the data to the console for debugging purposes. Before logging the data, there is some minor data manipulation happening as well (refer to code snippet below).

The Challenge: Upon initially loading the Homepage, I am able to view the 4 most recent transactions in the console, which is expected. However, upon navigating to the Transactions page, for a brief moment, the console displays the same 4 recent transactions again, although they are supposed to be exclusive to the Homepage. After this quick display, it then correctly logs the 10 most profitable transactions.

The Code: Below is a snippet of the code used for home.page.ts:

 insert code here...

The code for transaction.page.ts follows a similar structure:

 insert code here...

The Outcome: A summary of what is logged to the console during each stage of interaction is as follows

Upon initial entry to the Home page (displaying 4 rows):

insert code output here...

Transition to the Transactions page:

insert code output here...

The Enigma: Why does the console re-display the same 4 rows from the Homepage when accessing it after navigating away?

javascript angular typescript firebase google-cloud-firestore

Answer 1

Answer №1

On the transactions page, you may observe results appearing twice. This occurrence is most likely due to the valueChanges function retrieving data from the in-memory cache of Firestore first for a rapid response before fetching the actual data. In this scenario, 4 rows are initially cached upon being retrieved on the home page and subsequently accessed from the cache on the transactions page.

Answer 2

On the transactions page, you may observe results appearing twice. This occurrence is most likely due to the valueChanges function retrieving data from the in-memory cache of Firestore first for a rapid response before fetching the actual data. In this scenario, 4 rows are initially cached upon being retrieved on the home page and subsequently accessed from the cache on the transactions page.

Answer 3

Answer №2

It seems like the issue lies here:

loadHomeData() {
  this.txSubscription = this.firestore
  ...
  .subscribe(rows => {
    ...
  })
}

ngOnInit() {
  this.afAuth.onAuthStateChanged(() => {
    this.loadHomeData();
  })
}

ngOnDestroy() {
  this.txSubscription.unsubscribe();
}

You are correctly handling unsubscribing. However, when onAuthStateChanged fires again, the initial subscription is lost and cannot be unsubscribed. Consider using the switchmap operator with onAuthStateChanged to resolve this issue. Here's an example implementation:

this.subscription = this.af.authState.pipe(
  switchMap(auth => {
    if(auth !== null && auth !== undefined){
      return   this.firestore.collection('transactions', ref => ref.orderBy('profitEur', 'desc').limit(10)).valueChanges())
    } else{
      throw "Not loggedin";
    }
).subscribe(...)

Answer 4

It seems like the issue lies here:

loadHomeData() {
  this.txSubscription = this.firestore
  ...
  .subscribe(rows => {
    ...
  })
}

ngOnInit() {
  this.afAuth.onAuthStateChanged(() => {
    this.loadHomeData();
  })
}

ngOnDestroy() {
  this.txSubscription.unsubscribe();
}

You are correctly handling unsubscribing. However, when onAuthStateChanged fires again, the initial subscription is lost and cannot be unsubscribed. Consider using the switchmap operator with onAuthStateChanged to resolve this issue. Here's an example implementation:

this.subscription = this.af.authState.pipe(
  switchMap(auth => {
    if(auth !== null && auth !== undefined){
      return   this.firestore.collection('transactions', ref => ref.orderBy('profitEur', 'desc').limit(10)).valueChanges())
    } else{
      throw "Not loggedin";
    }
).subscribe(...)

Answer 5

Answer №3

Perhaps the issue is arising due to

this.afAuth.onAuthStateChanged()

being triggered twice.

Instead of constantly checking for the authentication state in every component, you can simply subscribe to the auth state in app.component.ts. If a user is not authenticated or if the authentication state changes, they will be redirected to the login page; otherwise, they will be directed to home.page.ts.

export class AppComponent {
  constructor(private readonly auth: AngularFireAuth, private router: Router) {
    this.auth.authState.subscribe(response => {
      console.log(response);
      if (response && response.uid) {
        this.router.navigate(['dashboard', 'home']); // Route to Home page
      } else {
        this.router.navigate(['auth', 'login']); // Route to Login Page
      }
    }, error => {
      this.auth.signOut();
      this.router.navigate(['auth', 'login']); // Route to Login Page
    });
  }
}

In your home.component.ts and transaction.page.ts, there's no need to check the authentication state.

home.component.ts

 txSubscription: Subscription;

  constructor(
    public afAuth: AngularFireAuth,
    private readonly firestore: AngularFirestore
  ) { }

  // Function to get the 4 most recent transactions
  async getRecentTransactions() {
    this.txSubscription = this.firestore
      .collection('transactions', ref => ref.orderBy('date', 'desc').limit(4))
      .valueChanges()
      .subscribe(rows => {
        this.recentTransactions = [];

        rows.forEach(row => {
          let jsonData = {};
          jsonData['ticker'] = (row['ticker'].length <= 10 ? row['ticker'] : row['ticker'].substring(0, 10) + '...');
          jsonData['date'] = formatDate(row['date'].toDate(), 'dd/MM/y', 'en');
    
          jsonData['amount'] = prefix + formatNumber(row['netAmount'], 'be', '1.2-2');
    
          this.recentTransactions.push(jsonData);
        })

        console.log("home page", this.recentTransactions);
      })
  }

  ngOnInit() {
      this.getRecentTransactions();
  }

  ngOnDestroy() {
    this.txSubscription.unsubscribe();
  }

transaction.page.ts

 txSubscription: Subscription;

  constructor(
    public afAuth: AngularFireAuth,
    private readonly firestore: AngularFirestore
  ) { }

  // Function to load the data for the home page
  loadHomeData() {
    this.txSubscription = this.firestore
      .collection('transactions', ref => ref.orderBy('profitEur', 'desc').limit(10))
      .valueChanges()
      .subscribe(rows => {
        this.resultRows = [];

        rows.forEach(row => {
          this.resultRows.push(row['ticker'].slice(0, 8));
        });

        console.log("transaction page", this.resultRows);
      })
  }

  ngOnInit() {
      this.loadHomeData();
  }

  ngOnDestroy() {
    this.txSubscription.unsubscribe();
  }

Answer 6

Perhaps the issue is arising due to

this.afAuth.onAuthStateChanged()

being triggered twice.

Instead of constantly checking for the authentication state in every component, you can simply subscribe to the auth state in app.component.ts. If a user is not authenticated or if the authentication state changes, they will be redirected to the login page; otherwise, they will be directed to home.page.ts.

export class AppComponent {
  constructor(private readonly auth: AngularFireAuth, private router: Router) {
    this.auth.authState.subscribe(response => {
      console.log(response);
      if (response && response.uid) {
        this.router.navigate(['dashboard', 'home']); // Route to Home page
      } else {
        this.router.navigate(['auth', 'login']); // Route to Login Page
      }
    }, error => {
      this.auth.signOut();
      this.router.navigate(['auth', 'login']); // Route to Login Page
    });
  }
}

In your home.component.ts and transaction.page.ts, there's no need to check the authentication state.

home.component.ts

 txSubscription: Subscription;

  constructor(
    public afAuth: AngularFireAuth,
    private readonly firestore: AngularFirestore
  ) { }

  // Function to get the 4 most recent transactions
  async getRecentTransactions() {
    this.txSubscription = this.firestore
      .collection('transactions', ref => ref.orderBy('date', 'desc').limit(4))
      .valueChanges()
      .subscribe(rows => {
        this.recentTransactions = [];

        rows.forEach(row => {
          let jsonData = {};
          jsonData['ticker'] = (row['ticker'].length <= 10 ? row['ticker'] : row['ticker'].substring(0, 10) + '...');
          jsonData['date'] = formatDate(row['date'].toDate(), 'dd/MM/y', 'en');
    
          jsonData['amount'] = prefix + formatNumber(row['netAmount'], 'be', '1.2-2');
    
          this.recentTransactions.push(jsonData);
        })

        console.log("home page", this.recentTransactions);
      })
  }

  ngOnInit() {
      this.getRecentTransactions();
  }

  ngOnDestroy() {
    this.txSubscription.unsubscribe();
  }

transaction.page.ts

 txSubscription: Subscription;

  constructor(
    public afAuth: AngularFireAuth,
    private readonly firestore: AngularFirestore
  ) { }

  // Function to load the data for the home page
  loadHomeData() {
    this.txSubscription = this.firestore
      .collection('transactions', ref => ref.orderBy('profitEur', 'desc').limit(10))
      .valueChanges()
      .subscribe(rows => {
        this.resultRows = [];

        rows.forEach(row => {
          this.resultRows.push(row['ticker'].slice(0, 8));
        });

        console.log("transaction page", this.resultRows);
      })
  }

  ngOnInit() {
      this.loadHomeData();
  }

  ngOnDestroy() {
    this.txSubscription.unsubscribe();
  }

Why is my Angular app displaying outdated data from Firebase when navigating between pages?

Answer №1

Answer №2

Answer №3

Similar questions

Various redirects based on multiple referrers

Issue with Vue.js: document.querySelector is returning a null value even though the element clearly exists

Show an HTML image encoded in base64 from its origin

The directive attribute in AngularJS fails to connect to the directive scope

Instructions for implementing this script in HTML and JavaScript: utilize the clone() function

Turn the camera to focus on the chosen object using three.js

React.js implementation of individual checkboxes for every row in a table

The placeholder text is not displaying with bullets in Internet Explorer. However, it is functioning correctly in Chrome

In TypeScript, both 'module' and 'define' are nowhere to be found

What is the best way to ensure that this form field remains hidden when the page is loaded?

Differentiate among comparable values through placement regex

Could an OpaqueToken be assigned using an observable?

Unpacking data types from an array of classes in TypeScript: A step-by-step guide

Retrieve data from the MySQL database based on the search input field and dynamically update the options in the

How can I adjust the scale and position of my image textures in Three.js?

What is the best way to implement a loop using JQuery?

Getting a specific piece of information from a JSON file

Exploring the optimal approach for distinguishing between numbers and strings in a JavaScript/Typescript class

Rotating through elements in timed intervals

Having trouble running npm start with Express generator