computed fromPromise with nested promises does not reevaluate when observable changes?

Question

I'm running into this issue where I have certain computed values that are promises of promises, filtered on observables, which are not reevaluated when the observables it depends on changes. Here's an example,

class CustomerStore {
  @observable selectedCustomerId = "";
  @observable selectedHouseholdId = "";

  @computed
  get customer() {
    return this.selectedCustomerId
      ? fromPromise(api.getCustomerById(this.selectedCustomerId))
      : fromPromise.resolve(null);
  }

  @computed
  get customerRegisteredProducts() {
    return fromPromise(
      this.customer.then(customer => {
        return api.getCustomerRegisteredProducts(customer.identity.id).then(
          action(products => {
            this.selectedHouseholdId = products.map(p => p.householdId).shift();
            return products;
          })
        );
      })
    );
  }

  @computed
  get customerProducts() {
    return fromPromise(
      this.customerRegisteredProducts.then(registeredProducts => {
        return registeredProducts.filter(
            rp => rp.householdId === this.selectedHouseholdId
          );
      })
    );
  }
}

this.selectedHouseholdId is updated by a <select> field in the UI, but I noticed that the list of customerProducts is not reevaluated when that changes. What am I doing wrong?

Thanks for the help,

Andrew

Answer 1

The change of this.selectedHouseholdId won't make customerProducts to re-calculate again because during the execution of the computed function this observable wasn't accessed, only after when the promise resolved.

You can see the different in your first computed function: customer(), when this.selectedCustomerId will change this function will re-calculate again.