Force refresh view in LWC

Question

In Aura, we can do

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

to cause standard components to update.

How can we do an equivalent in LWC because sfdx refuses to publish .js code with $A in it saying the usage is disallowed in LWC?

For now i tricked it with

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

but that is obviously less than ideal....

Answer 1

I was able to find an answer on the Developer Docs forum for a work-around. I was surprised how challenging it was to find a solution in the Salesforce LWC docs, so I'm not sure if this is the recommended approach, but it's the best I've been able to find!

You will need to import the updateRecord method from the lightning/uiRecordApi. Then, you can call this updateRecord() function in your lwc javascript file whenever you want your detail record page (i.e. Account Detail Page) to refresh.

In the following example, I have a lwc that lives on my lightning detail page on the Account record (i.e. as a side-bar component). In the example, my lwc calls a handleClick method that imperatively calls an updateAccount() method in my Apex Controller Class. In the callback method, I update the Account Detail record using the updateRecord() function.

Import Statement:

import { updateRecord } from 'lightning/uiRecordApi';

Function:

updateRecord({ fields: { Id: this.recordId } });

Example:

import { LightningElement, api, track, wire } from 'lwc';
import { updateRecord } from 'lightning/uiRecordApi';
import updateAccount from '@salesforce/apex/ApexControllerClass.updateAccount;

export default class lightning-web-component-example extends LightningElement {

     @api recordId;

     handleClick(){

          // Call Apex Method imperatively to update Account record
          updateAccount({accountId: this.recordId})
               .then( result => {
          
                    if (result) {
                         // Refresh Account Detail Page
                         updateRecord({ fields: { Id: this.recordId }})
                    }

               })
     }
}

Answer 2

Starting in Winter '21, you'll be able to use getRecordNotifyChange() function to refresh your record page from a lightning web component.

getRecordNotifyChange is working almost the same way force:refreshView did, except it takes a list of recordId which makes it a little bit more flexible:

import { LightningElement, wire } from 'lwc';
import { getRecord, getRecordNotifyChange } from 'lightning/uiRecordApi';
import apexUpdateRecord from '@salesforce/apex/Controller.apexUpdateRecord';
     
export default class NotifyRecordChangeExample extends LightningElement {
  @api recordId;
     
  // Wire a record.
  @wire(getRecord, { recordId: '$recordId', fields: ... })
  record;
     
  async handler() {
    // Update the record via Apex.
    await apexUpdateRecord(this.recordId);
    // Notify LDS that you've changed the record outside its mechanisms.
    getRecordNotifyChange([{recordId: this.recordId}]);
  }
}

Answer 3

Adding information from comments.

As of today, there's no 1-1 mapping of Aura vs. LWC events/interfaces. While the approach you have in there may work, but I will personally not recommend it to use that way.

As understood from your comments, you have a LWC on a Lighting page in LEX along with other standard components, viz., related list. And that upon updates on the LWC, you want the standard related list to be refreshed. My approach here would have been to wrap the LWC in an Aura Component, send an event to the Aura Component and then utilize force:refreshView on the Aura Component.

This may look like a boiler-plate approach, but because you can compose a LWC within an Aura Component and can communicate with events, this approach would be the safer route.

Your overall implementation could look as:

<aura:component>
    <-- this is the LWC -->
    <c:myLWCComponent onrecordChange="{!c.refreshView}" />
</aura:component>

And then in the LWC, you raise the event once you have the records updated:

this.dispatchEvent(new CustomEvent('recordChange'));

And then in your Aura JS Controller, you handle the event:

refreshView: function(component, event) {
    // refresh the view
    $A.get('e.force:refreshView').fire();
},

Answer 4

You can import and use refreshApex.

    import {refreshApex} from '@salesforce/apex';

    // If you want to refresh @wire property

    @wire(accountData) accts;

    methodAfterWhichYouWantToRefresh(){
//your code .....
    .............
    ........
       refreshApex(this.accts);
    } 

    // If you have Imperative Method

    handleLoad() {
            getContactList()
                .then(result => {
                    this.contacts = result;
                    this.error = undefined;
                })
                .catch(error => {
                    this.error = error;
                    this.contacts = undefined;
                });
        }

    methodAfterWhichYouWantToRefresh(){
       //your code .....
    .............
    ........

       refreshApex(this.handleLoad());
    }

above is just example not full code...

Answer 5

Spring 23 update. Refresh view event is now available for lwc. :)

import { RefreshEvent } from 'lightning/refresh';

export default class MyComponent extends LightningElement {
  // a button click or programmatically
  onRefresh() {
    this.dispatchEvent(new RefreshEvent());
  }
}

https://developer.salesforce.com/blogs/2023/01/lwc-enhancements-for-developers-learn-moar-spring-23

Answer 6

I used combination of Apex and Navigation

• Update same record in apex method (just update DML, no field values changed)
• When response is returned, navigate on record detail page

navigateToViewAccountPage() { 
   this[NavigationMixin.Navigate]({ 
   type: 'standard__recordPage', 
   attributes: { recordId: this.recordId, objectApiName: 'Account', actionName: 
   'view' }, 
   }); 
}