In LWC I cannot use a variable which comes from the parent Aura component

Question

I wrapped an LWC with an Aura component for use it as a quick action and I sent a record's detail from the Aura to the LWC.

AuraWrapper:

<aura:attribute name="orderRecord" type="Object"/>
<aura:attribute name="recordLoadError" type="String"/>

<force:recordData aura:id="recordLoader"
    recordId="{!v.recordId}"
    fields="A__c, B__c"
    targetFields="{!v.orderRecord}"
    targetError="{!v.recordLoadError}"
    /> 
                    
<c:childLwc variableA="{!v.orderRecord.A__c}" variableB="{!v.orderRecord.B__c}"></c:childLwc>

I need to use those variables which come from the Aura parent to filter child component's (LWC) initial data but they aren't available in connectedCallback and renderedCallback's first call.

If I try to access them -let's say a function which is invoked by button click- they are available.

LWC Child:

@api
variableA;
@api
variableB;

connectedCallback(){
    // variableA and variableB aren't available at this point so filter not works
    this.loadInitDataByFilters(this.variableA, this.variableB);
}

handleClick(){
    // variableA and variableB are available at this point so filter works
    this.loadDataByFilters(this.variableA, this.variableB);
}

How can I use those variables on initial data population process?

Answer 1

You have misunderstood how the lifecycle hooks and API properties function. If you want to call your loading function, don't do it from the connectedCallback - that's way too soon. Instead write your API properties as getter/setter functions, and call the loading function once both are set. This could be similar to:

_variableA;
_variableB;

@api
get variableA() {
    return this._variableA;
}

set variableA(value) {
    this._variableA = value;

    this.callLoadWhenReady();
}

@api
get variableB() {
    return this._variableB;
}

set variableB(value) {
    this._variableB = value;

    this.callLoadWhenReady();
}

callLoadWhenReady() {
    if (this._variableA && this._variableB) {
        this.loadInitDataByFilters(this._variableA, this._variableB);
    }
}

This:

• Uses some "private" properties to hold the variable A and B values. Both start as undefined.
• Only calls the loadInitDataByFilters once the two variables have been set.