Need to update table with change of Picklist value in LWC

Question

Have got an accounts list that passes info to child component. Need that with change value of picklist(valueType in handleChange), accounts list would change also and pass renewed info to child component. Right now handleChange in list.js, do nothing but updating valueType.

listController.cls

public with sharing class listController {
    

@AuraEnabled (cacheable = true)

public static List<Account> getAccList(String valueType){

String key = '%' + valueType + '%';

    if (valueType != null && valueType != ''){
        return [SELECT Id, Name, image__c, (SELECT Name FROM Users), Budget__c, NumberOfEmployees, Type, Description, Industry FROM Account WHERE Type LIKE :key ];
    } else {
        return [SELECT Id, Name, image__c, (SELECT Name FROM Users), Budget__c, NumberOfEmployees, Type, Description, Industry FROM Account];
    }

        }

}

list.html

<template>
    <lightning-card>
        
        <template if:true={TypePicklistValues.data}>
            <lightning-combobox name="progress"
                                label="Type"
                                value={valueType}
                                placeholder="-Select-"
                                options={TypePicklistValues.data.values}
                                onchange={handleChange} >
            </lightning-combobox>
      </template><br/>

        <template if:true={accounts.data}>
           
    <div class = "container">
        <div class="slds-box slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
        <lightning-layout multiple-rows> 
            
        <template for:each={accounts.data} for:item="account">
            
                <c-tile 
                key={account.id} 
                account={account} 
                ontileclick={handleTileClick}>
            </c-tile>
        
    
        </template>
   
    </lightning-layout>
</div>
    </div>   
</template>

</lightning-card>
    
</template>

list.js

import { LightningElement, wire, api, track } from 'lwc';
import getAccList from '@salesforce/apex/listController.getAccList';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import Type_FIELD from '@salesforce/schema/Account.Type';

import getValueType from '@salesforce/apex/listController.getValueType';

export default class List extends LightningElement {

    @wire(getAccList) accounts;
    @wire(getValueType) apexValueType;
    
    
    @api valueType;
    @track apexValueType;

    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    objectInfo;

    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: Type_FIELD})
    TypePicklistValues;

    handleChange(event) {
        this.valueType = event.detail.value;
       getAccList({valueType:this.valueType});
       
        
    }

    handleTileClick(evt) {
        
       
        // This component wants to emit a productselected event to its parent
        const event = new CustomEvent('accountselected', {
            detail: evt.detail,
            
            
        });
        // Fire the event from c-list
        this.dispatchEvent(event);
    }
}

Answer 1

Seems like you want to access account records from the getAccList method imposing valueType as a filter.

As you are doing an imperative call to getAccList in handleChange, it will not update the attribute value automatically as it is supposed to return a promise.

To resolve it the solution would be following:

either make use of then-catch to handle the response and neet to assign to the class attribute.

or

use the parameterized wire as

@wire(getAccList, { valueType: '$valueType'}) accounts;

this will automatically serve the account records based on value type filter automatically on changing the valueType value