Call async/await methods in LWC

Question

I have a component to show toast notifications on Salesforce. But the messages should prompt if the first method is undefined. I'm using async/await to try to execute this in order but it's not working.

The code:

    @wire(checkCustomerStatus, { accId: '$recordId'})
    async wiredcheckCustomerStatus  ({ error, data }){
        if(data) {
            this.message = data;
            this.custmStatus = data;
            this.variant = 'error',
            this.dispatchEvent(new CloseActionScreenEvent());
            this.showNotification();
        }
        if(error) {
            console.log('erro status -' + error);
        }
    }
    
    @wire(checkBlockingConditionsOB, { accId: '$recordId' })
    async wiredcheckBlockingConditionsOB ({ error, data }){

        await this.wiredcheckCustomerStatus();
        
        if(this.custmStatus != undefined) {
            
        }
        else {
            if(data) {
                this.message = data;
                this.variant = 'warning',
                this.dispatchEvent(new CloseActionScreenEvent());
                this.showNotification();  
            }
            if(error) {
                console.log('erro status -' + error);
            }
        }

At this point is my mistake:

await this.wiredcheckCustomerStatus();

I'm recieving at console this error:

oneSFA_PlaceOrderButton.js:4 Uncaught (in promise) TypeError: Cannot destructure property 'error' of 'undefined' as it is undefined.

I need that the second @wire block is executed only after the first @wire block.

Any tips?

Best Regards

Answer 1

There is no need of async/await. Once the first wired method returns data, you can call the second apex method imperatively:

@wire(checkCustomerStatus, { accId: '$recordId'})
wiredcheckCustomerStatus  ({ error, data }){
    if(data) {
        this.message = data;
        this.custmStatus = data;
        this.variant = 'error',
        this.dispatchEvent(new CloseActionScreenEvent());
        this.showNotification();
        
        checkBlockingConditionsOB({ accId: this.recordId })
            .then((result) => {
                this.message = result;
                this.variant = 'warning',
                this.dispatchEvent(new CloseActionScreenEvent());
                this.showNotification();  
            })
            .catch((error) => {
                console.log('erro status -' + error);
            });
    }
    if(error) {
        console.log('erro status -' + error);
    }
}

Answer 2

@wire functions are executed by the lightning framework. You cannot influence the order of these calls so adding the async keyword there does nothing.

You can either in both functions check if the other one already returned and, if so, then show your toast, or like @RubenDG suggests call one (or both) of those functions directly instead of using @wire.

If you want things to respond as quickly as possible, you can create a setter for recordId and call both functions asynchronously from there.

Something like

    @api get recordId() {
        return this._recordId;
    }
    set recordId(value) {
        this.addAttribute('record-id', value);
        this._recordId = value;
        this.makeCalls();
    }

    async makeCalls() {
        let somevar = await checkBlockingConditionsOB({recordId: this._recordId});
        let othervar = await checkCustomerStatus({recordId: this._recordId});
        ...
        do things here
        ...
    }