Lighting record form is not showing updated records on edit in LWC

Question

I am trying to update record in Lightning Web component through lightning-record-form. The issue I am facing is - I does not show updated records on Save immediately until I refresh it. I have tried using refreshApex, calling apex imperatively also. But nothing worked for me.

Here's my code -

    @api recordId;
    @track bears;
    wiredbearResult;
    @wire(searchBears, {searchTerm: '$searchTerm'})
    wiredBears(result) {
      console.log('result', result);
      this.wiredbearResult = result;
      if (result.data) {
        this.bears = result.data;
      } else if (result.error) {
        this.error = result.error;
     }
   }

    handleSubmit(event) {
      return refreshApex(this.wiredbearResult);
   }

And this is my html file code -

    <lightning-record-form
      record-id={recordId}
      object-api-name="Bear__c"
      layout-type="Full"
      mode="edit"
      onsubmit={handleSubmit}>
   </lightning-record-form>

Any suggestions, what I am missing?

Answer 1

I believe the problem is that the refreshApex is being called too early in the process. Change your code as follows:

@api recordId;
@track bears;
wiredbearResult;
@wire(searchBears, {searchTerm: '$searchTerm'})
wiredBears(result) {
  console.log('result', result);
  this.wiredbearResult = result;
  if (result.data) {
    this.bears = result.data;
  } else if (result.error) {
    this.error = result.error;
  }
}

handleSuccess(event) {
  return refreshApex(this.wiredbearResult);
}

And:

<lightning-record-form
  record-id={recordId}
  object-api-name="Bear__c"
  layout-type="Full"
  mode="edit"
  onsuccess={handleSuccess}>
</lightning-record-form>

The difference is that the success event is raised once the creation or editing has been successfully applied on the server, allowing you to cleanly update the UI using refreshApex after that has happened, whereas the submit event is invoked when the user attempts to save the data in the form and is expected to actually then send the data to the server. This sending is an async operation.