Refresh record page from Lightning web component | refreshView

Hi Trailblazers, This post talks about how to refresh the standard record detail page from a custom Lightning web component. 

Let's say, you have a custom component on the record page, which updates the record, but when the record is updated by that custom component, the detail page does not show the updates made by the component, we will see how to refresh that.

If you are already familiar with force:refreshView in Lightning Aura Components, you might be wondering what is the LWC alternative for that...

And the solution for this is getRecordNotifyChange from the uiRecordApi, added in Winter2021.

Check out new RefreshEvent API: Use RefreshEvent in LWC to automatically refresh record pages

Sample Code

In the below code, I am updating the record using apex, after a successful update I am calling the getRecordNotifyChange method to refresh the record details page.

import { LightningElement, wire } from 'lwc';

// Import the methods from uiRecordApi.
import { getRecord, getRecordNotifyChange } from 'lightning/uiRecordApi';
import updateUsingApex from '@salesforce/apex/MyController.updateUsingApex';
     
export default class NotifyRecordChangeExample extends LightningElement {
	@api recordId;
        recordData;

	@wire(getRecord, { recordId: '$recordId', fields: ['A__c', 'B__c'] })
	record;
     
	updateRecordUsingApex() {
		// create data record to update
                this.recordData = {Id: this.recordId}
                // ...
		updateUsingApex({ record: this.recordData})
			.then((result) => {
				// notfiy Lightning dataservice about the record change
				getRecordNotifyChange([{recordId: this.recordId}]);
			})
			.catch((error) => {
				console.log(error);
			});
	}
}