CurrentPageReference @wire method is executes after another @wire method

Question

I have @wire method in LWC component which uses the current page 'actionName' and 'recordId', which I want to get it from CurrentPageReference and use in another wire method, but CurrentPageReference wire method called after the other @wire method causing a null reference of actionName and recordId.

@wire(CurrentPageReference) {        
getStateParameters(currentPageReference) {  
               if (currentPageReference) {    
                 this.screenMode = currentPageReference.attributes.apiName != undefined ?
                    currentPageReference.attributes.apiName.substr(currentPageReference.attributes.apiName.length - 3):
                    currentPageReference.attributes.actionName;
                    this.recordId = currentPageReference.attributes.recordId; 
                 } 
                   this.screenMode = this.screenMode == 'new'? 'New' : 'Edit'; 
               } 
    
    @wire(getInitialAccountRecords,{action:this.screenMode,recordId:'$recordId'})

 

Any help appreciated. Thanks

Answer 1

First, you cannot control the order of wire methods and how/when they are called. This is managed by the framework.

Your property needs to be reactive:

@wire(getInitialAccountRecords,{action:'$screenMode', recordId:'$recordId'})

Note that this will will be called multiple times. You will need to account for this in your code:

@AuraEnabled public static ... getInitialAccountRecords(String action, Id recordId) {
  if(action == null && recordId == null) {
    return ...; // Empty value
  }
  // Do something with action/recordId here
  return ...; // populated values
}

Answer 2

Why not call getInitialAccountRecords imperatively instead? For example:

@wire(CurrentPageReference) {        
getStateParameters(currentPageReference) {  
  if (currentPageReference) {    
    this.screenMode = currentPageReference.attributes.apiName !== undefined ? 
      currentPageReference.attributes.apiName.substr(
        currentPageReference.attributes.apiName.length - 3
      ):
      currentPageReference.attributes.actionName;
    this.recordId = currentPageReference.attributes.recordId; 
  } 
  this.screenMode = this.screenMode === 'new' ? 'New' : 'Edit'; 
  getInitialAccountRecords(
    { action: this.screenMode, recordId: this.recordId }
  ).then((res) => {
    // handle success
  }).catch((err) => {
    // handle errors
  });
}

Answer 3

order of apex imperative also is not guaranteed, I have put all the output in one method call and used within @wire. that worked for me.

Thanks you Matthew Souther and sfdcfox for your time.