Utilizing Angular2 with Firebase for efficient denormalized data queries

Question

Utilizing Angular2 with Firebase for efficient denormalized data queries

I am currently working on crafting a query for a denormalized database. Drawing inspiration from the example showcased in Firebase's blog post, my objective is to:

Retrieve the array of forms associated with the current user and return references to each individual item within that list.

Below is the snippet of code I have been developing:

  getFormList():firebase.database.Reference {
    // the old method
    //return firebase.database().ref('/formsByID').orderByChild('userList').startAt(this.userId).endAt(this.userId);

    var formRef = firebase.database().ref("/formsByID");
    var userRef = firebase.database().ref("/userProfiles");

    // this will be our list of forms beneath the user node
    var userFormRef = userRef.child(this.userId).child("formsList");

    // whenever an item is added to the forms list
    userFormRef.on("child_added", function(snap) {
      // snap.key represents the key of the form fetched from the forms list
      //let formKey = snap.key(): string;
      return formRef.child(snap.key);
    }); 

  }

The issue I'm encountering lies in typescript's expectation for my getFormList method to return a value, but a value will only be returned when a new item is appended to userFormRef - any assistance would be greatly appreciated.

angular typescript firebase firebase-realtime-database ionic3

Answer 1

Answer №1

The method getFormList() in your case will not return any value.

Your return statement should be inside the callback function.

userFormRef.on("child_added", function(snap) {
  return formRef.child(snap.key); // this will return a value for your callback function
});

If you want to access the snap outside of the getFormList() method, you need to implement it there or pass the callback to the getFormList() method.

This can be achieved like this:

 getFormList(cb):firebase.database.Reference {
    var formRef = firebase.database().ref("/formsByID");
    var userRef = firebase.database().ref("/userProfiles");

    var userFormRef = userRef.child(this.userId).child("formsList");

    userFormRef.on("child_added", cb); 
  }

To call the method, use:

getFormList(function(snap) {
  // handle snap data here
});

It all depends on your specific use case.

Answer 2

The method getFormList() in your case will not return any value.

Your return statement should be inside the callback function.

userFormRef.on("child_added", function(snap) {
  return formRef.child(snap.key); // this will return a value for your callback function
});

If you want to access the snap outside of the getFormList() method, you need to implement it there or pass the callback to the getFormList() method.

This can be achieved like this:

 getFormList(cb):firebase.database.Reference {
    var formRef = firebase.database().ref("/formsByID");
    var userRef = firebase.database().ref("/userProfiles");

    var userFormRef = userRef.child(this.userId).child("formsList");

    userFormRef.on("child_added", cb); 
  }

To call the method, use:

getFormList(function(snap) {
  // handle snap data here
});

It all depends on your specific use case.

Answer 3

Answer №2

With the help of @Orlandster, I finally solved the issue I was facing. The key was to simplify my providers and focus on returning references when working with Angular and Firebase. I restructured my providers into two methods:

// Returns a list of forms (ref) for the current user
getUserFormsRef(): firebase.database.Reference {
  var userRef = firebase.database().ref("/userProfiles");
  return userRef.child(this.userId).child("formsList");
}

// Returns a form list (ref)
getFormListRef(): firebase.database.Reference {
  return firebase.database().ref("/formsByID");
}

In my component, I implemented the following:

// List the forms
ionViewDidLoad() {
  // Get a reference to the user's forms
  this.formProvider.getUserFormsRef().on("child_added", userFormsSn => {
    this.formList = [];
    // Retrieve and push form details based on keys from the user's forms reference
    this.formProvider.getFormListRef().child(userFormsSn.key).on("value", formsSn => {
      this.formList.push({
        id: formsSn.key,
        name: formsSn.val().name
      })
    });
  });
}

The key takeaway is that all calls to my formProvider now only return database reference objects. This approach allows me to perform a Firebase equivalent of a WHERE query in a denormalized data set.

Answer 4

With the help of @Orlandster, I finally solved the issue I was facing. The key was to simplify my providers and focus on returning references when working with Angular and Firebase. I restructured my providers into two methods:

// Returns a list of forms (ref) for the current user
getUserFormsRef(): firebase.database.Reference {
  var userRef = firebase.database().ref("/userProfiles");
  return userRef.child(this.userId).child("formsList");
}

// Returns a form list (ref)
getFormListRef(): firebase.database.Reference {
  return firebase.database().ref("/formsByID");
}

In my component, I implemented the following:

// List the forms
ionViewDidLoad() {
  // Get a reference to the user's forms
  this.formProvider.getUserFormsRef().on("child_added", userFormsSn => {
    this.formList = [];
    // Retrieve and push form details based on keys from the user's forms reference
    this.formProvider.getFormListRef().child(userFormsSn.key).on("value", formsSn => {
      this.formList.push({
        id: formsSn.key,
        name: formsSn.val().name
      })
    });
  });
}

The key takeaway is that all calls to my formProvider now only return database reference objects. This approach allows me to perform a Firebase equivalent of a WHERE query in a denormalized data set.

Utilizing Angular2 with Firebase for efficient denormalized data queries

Answer №1

Answer №2

Similar questions

When I try to pass a formControl to a child component in Angular, it throws a "no value

Webpack is having trouble identifying Node's process module

Automatic renewal of bearer token in Angular 7

Utilizing the axios create method: troubleshooting and best practices

Calling a function within another function is not allowed in Typescript

What is the best way to see if a variable is present in TypeScript?

Translating SQL to Sequelize Syntax

Updating a URL parameter in Angular using programmatic methods

Issue with Angular MatSelect Losing Selected Value in Reactive Form Upon Submission

How to disable time selection in owl-date-time picker for Angular 6 inputs

How to dynamically disable a checkbox in Angular reactive forms depending on the value of another checkbox

What is the best way to send two separate properties to the selector function?

Error encountered in app.module.ts file of Angular 2 application

Cloud Function scheduler incorporating dynamic memory allocation control

"Enhance your PrimeVue Tree component with interactive action buttons placed on every TreeNode

Updating the data attribute of an object in HTML using Angular

Promise disregards the window being open

Utilizing a personalized component with a mat-autocomplete feature within reactive forms by nesting

Angular and RxJS can be set up to delay the next call from BehaviorSubject in situations where there are multiple

When the appdir is utilized, the subsequent export process encounters a failure with the error message "PageNotFoundError: Module for page /(...) not