How to refresh the component in LWC after successful save of standard record page?

Question

I am using a LWC which have lightning data table and edit button. This lightning datatable display contacts.

If the click the edit button it will open edit contact modal pop up which is standard.

When I save it I need to reload whole page. How to refresh the specific component.

editContact(event){
    
    const row = event.detail.row;
   
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: row.Id,
            objectApiName: 'Contact',
            actionName: 'edit'
        }
    });


}

I am using standard record edit page.

Answer 1

There isn't a clean stable way to do this i believe. You'll navigate the user away to the standard Contact Edit page. When the edit is complete, there is no way really to notify the datatable that the data has been updated. Couple of alternatives that i can think of-

1. Just provide a simple refresh button on the datatable to call apex and get the updated contact data.
2. Use Lightning:recordEditForm in an Aura wrapper for your LWC. It has an event for onsuccess, which will allow you to write your custom logic for what to do after a successful update. https://developer.salesforce.com/docs/component-library/bundle/lightning:recordEditForm
3. Use Change Data Capture and lightning-emp-api to detect data changes in real time. You can fire the CDC events from the update trigger in contact. This is a little over the top, but doable. https://developer.salesforce.com/docs/component-library/bundle/lightning-emp-api/documentation

Answer 2

As there is no straight forward method to refresh the component as we don't have handler. I figured this steps to solve this problem .

STEPS

1. I added a aura component with force:refresh handler.
2. Calling the lwc from aura
3. Define refresh method in lwc which return refreshapex and call the refresh method from doinit in aura
4. Drag and drop the newly created aura component instead of ur lwc.

Answer 3

There is trick to use the forcerefresh view in LWC Js code.

Put below code in save method at the end it will refresh the component.

eval("$A.get('e.force:refreshView').fire();");

Answer 4

I have also been in this situation and finally I am able to go past this situation without using Aura. We don't have any OOB LWC events that listen to standard show toast events/refresh events but I have used a platform event that will get fired on record update/create and we can subscribe to that event in our LWC component and refresh the lightning-datatable once the save is committed and successful. To know more on how to do this please refer to my blog How to Refresh Lightning Datatable after triggering standard events(new/edit) in LWC.

Answer 5

Try this.

window.open('url','_self');
document.location.reload(true);

Answer 6

We faced the same problem at my workplace and we ended up creating an LWC component that fires dummy force:refreshView events and it works with Create/Edit modals as well as detail tab inline edits.

import {LightningElement, api, wire} from 'lwc';
import {getRecord} from 'lightning/uiRecordApi';

export default class ForceRefresh extends LightningElement {

@api recordId;
originalURL = location.href;
hasChanged = false;
intervalId;

connectedCallback() {
    this.intervalId = setInterval(() => {
        // Stop when navigated away from the record page
        if(!location.href.includes(this.recordId)) {
            clearInterval(this.intervalId);
            return;
        }

        this.hasChanged = this.hasChanged || location.href !== this.originalURL;
        if(this.hasChanged && location.href === this.originalURL) {
            this.hasChanged = false;
            this.fireEvent();
        }
    }, 500);
}

disconnectedCallback() {
    if(this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null;
    }
}

@wire(getRecord, {recordId : '$recordId', fields : ['Id']})
wiredRecord(result) {
    result?.data && (this.fireEvent());
}

fireEvent() {
    this.dispatchEvent(new CustomEvent('forcerefresh',
        {bubbles : true, composed : true}
    ));
}
}

Usage:

<c-force-refresh record-id={recordId} onforcerefresh={refresh}></c-force-refresh>