Dependent Combo-box in LWC

Question

I have a combo-box in LWC - whose values get populated on load of the page with the help of @wire. The code is as follows:

@wire(fetchL1ProductValues,{userType:'$userType',accountId:'$recordId'})
productList;

get productOptions(){
    console.log('>>>>'+JSON.stringify(this.productList.data));
    return this.productList.data;
}
                    <lightning-combobox
                        class="l1ProductCmp"
                        value={l1SelectedValue}
                        placeholder="-Select-"
                        options={productOptions}
                        onchange={onSelectProductL1} >
                    </lightning-combobox>

   onSelectProductL1(event){
   this.l1product = event.target.value;
    fetchL2ProductValues({productId: this.l1product ,userType: 
           this.userType})
    .then(result => {
      //how to transform the result so that i can populate another combo-box with this result
  }

The issue I'm facing here is that I am not able to populate the second combo-box with the result which i have obtained in onSelectProductL1 function. Imperative method of calling apex is not working in this scenario. we cannot use @wire inside a function. What would be the ideal solution to this problem?

Answer 1

I think you might want to make use of a second @wire function similar to this using dynamic/reactive variables.

@wire(fetchL1ProductValues,{userType:'$userType',accountId:'$recordId'})
productList;

@wire(fetchL2ProductValues, {userType: '$userType', productId: '$l1productId'})
secondProductList;

@track l1productId;

onSelectProductL1(event) {
  this.l1productId = event.target.value;
}

When l1ProductId changes, the fetchL2ProductValues method should run and update secondProductList. See "Wire an Apex Method with a Dynamic Parameter" here