Hello friends, In this post we will going to see an example that helps you to refresh a record details page through lightning web component(LWC).

Refresh record detail page in lightning web component

In aura component, to refresh record details page we used $A.get('e.force:refreshView').fire() event. But in web component, the process is slightly different. In LWC we can do it with two way, these are

1) By importing the updateRecord method from the lightning/uiRecordApi. 

2) By importing the getRecordNotifyChange method from the lightning/uiRecordApi.

Then you can call anyone of the both functions in your lwc javascript file whenever you want your record detail page to refresh. For better understanding let's see both functions with code example.

RefreshHandler.apxc

 public class RefreshHandler {    
    @AuraEnabled
    public static void UpdateAccount(Id accountId){
        Account a=new Account();
        a.Id=accountId;        
        a.Rating='Hot';
        update a;
    }
 }
RefreshRecordDetailPage,html
 <template>
 <lightning-card title="Refresh Detail Page">
        <div class="slds-align_absolute-center">
            <lightning-button onclick={refreshRecordDetail} variant="brand" label="Refresh Page"
                class="slds-m-left_x-small"></lightning-button>
        </div>
    </lightning-card>
 </template>
RefreshRecordDetailPage.js (Using getRecordNotifyChange function)
 import { LightningElement, api } from 'lwc';
 import { ShowToastEvent } from 'lightning/platformShowToastEvent';
 import { CloseActionScreenEvent } from 'lightning/actions';
 import { getRecordNotifyChange } from 'lightning/uiRecordApi';
 import doUpdate from '@salesforce/apex/RefreshHandler.UpdateAccount';
 export default class RefreshRecordDetailPage extends LightningElement {
    @api recordId;
    refreshRecordDetail() {
        doUpdate({
            accountId: this.recordId
        }).then(result => {
            if (result == null) {
                this.dispatchEvent(new CloseActionScreenEvent());
                getRecordNotifyChange([{ recordId: this.recordId }]);
            }
        }).catch(error => {
            if (error) {
                const event = new ShowToastEvent({
                    title: 'Error',
                    message: JSON.stringify(error),
                    variant: 'error'
                });
                this.dispatchEvent(event);
            }
        });
    }
 }
RefreshRecordDetailPage.js (Using updateRecord function)
 import { LightningElement, api } from 'lwc';
 import { CloseActionScreenEvent } from 'lightning/actions';
 import { ShowToastEvent } from 'lightning/platformShowToastEvent';
 import { updateRecord } from 'lightning/uiRecordApi';
 import accountId from '@salesforce/schema/Account.Id';
 import doUpdate from '@salesforce/apex/RefreshHandler.UpdateAccount';
 export default class RefreshRecordDetailPage extends LightningElement {
    @api recordId;
    refreshRecordDetail() {
        doUpdate({
            accountId: this.recordId
        }).then(result => {
            if (result == null) {
                this.dispatchEvent(new CloseActionScreenEvent());
                const fields = {};
                fields[accountId.fieldApiName] = this.recordId;
                updateRecord({ fields });
            }
        }).catch(error => {
            if (error) {
                const event = new ShowToastEvent({
                    title: 'Error',
                    message: JSON.stringify(error),
                    variant: 'error'
                });
                this.dispatchEvent(event);
            }
        });
    }
 }
RefreshRecordDetailPage.js-meta.xml
 <?xml version="1.0"?>
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>51.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__RecordPage</target>
		<target>lightning__RecordAction</target>
	</targets>
 </LightningComponentBundle>

Output:


Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.