Calling function and other component in LWC

Question

I have a scenario here. I have a button function that Submit the records to the server to update. Now I have one more button function that navigates to a another component but before navigation I am calling the Submit function so that the records get updated before the navigation. The component to which it is navigating to contains the same record but with the updated values.

The issue is: When the "Navigate to Other Component" button is clicked, the Submit function is called and navigate to other component but the navigated component doesn't get updated with the updated field values of the records until I refresh it again.

Component

HTML

<lightning-button title="Submit" label="Submit" onclick={handleSubmit} ></lightning-button>
<lightning-button title="Navigate" label="Navigate To Other Component" onclick={handleNavigation} ></lightning-button>

JS

@track error;
handleSubmit() {
  callServerToSave({"recId" : recordId})
  .then(result => {
  }).catch(error => {
  this.error = error;  
}
}

handleNavigation() {
  this.handleSubmit(){
  NavigationMixin // navigate to other component
}
}

Answer 1

You need to wait for the call to complete:

async handleSubmit() {
  return callServerToSave({"recId" : recordId});
}
async handleNavigation() {
  try {
    let result = await this.handleSubmit();
    NavigationMixin....
  } catch(error) {
    // Deal with the error from handleSubmit
  }
}