I am attempting to retrieve data from a specific user in Firebase and push that data into designated input fields. The path in Firebase is located here:
var query = db.ref('Clients/'+ clientName +'/form/');
I retrieve the data in the mounted() lifecycle hook as shown below:
mounted(){
// Retrieve current logged-in user from Firebase
var user = firebaseApp.auth().currentUser;
if ( user ){
// Get displayName to use in path for retrieving the client's data
var clientName = firebaseApp.auth().currentUser.displayName;
// Path to the data of that particular client
var query = db.ref('Clients/'+ clientName+'/form/');
query.once('value')
.then((snapshot) => {
// Obtain the client's location from Firebase and assign it to the clientLocation data in the DOM
this.clientLocation = snapshot.child('clientLocation').val();
});
}
}
After making changes and SAVING THE CODE WITHOUT RELOADING, the data is correctly pushed. However, upon reload, I encounter the following error message:
Error in mounted hook: "TypeError: Cannot read property 'displayName' of null"
I have tried using all available lifecycle hooks:
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
Unfortunately, the data does not appear. It seems that the firebaseApp is not fully "loaded" yet, preventing me from fetching the "displayName" property value and thus unable to populate the data path.
How and when should I execute this code so that it functions properly without running too early?