Did you notice that most of the components in details or other tabs in the record page are self refreshing when any action is performed on the main record? This behavior is made with an Aura event called “refreshView”. It is very handy - if you handle this event, it will tell you to refresh your component data. If you dispatch this event, it will tell the other components in the current page to refresh their components data.

Did you try this with LWC? Yes... there is no alternative for Lightning Web Components. This means that your LWC are unable to handle such an event and they are unable to dispatch it too.

Reviewing the source code of Aura shows that events in Aura are handled in a way that is not suitable for LWC. The solution is straightforward - a proxy Lightning component to handle and dispatch “refreshView” events between Lightning and LWC.

So, let's dive into the code

<aura:component description="refreshView4LWC" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId">
 <aura:handler name="init" value="{! this }" action="{! c.onInit }" />
 <aura:handler event="force:refreshView" action="{! c.onRefreshView }" />
</aura:component>


({
 onRefreshView: function (component, event, helper) {
   document.dispatchEvent(new CustomEvent("lwc://refreshView"));
 },

 onInit: function (component, event, helper) {
   document.addEventListener("aura://refreshView", () => {
     $A.get('e.force:refreshView').fire();
   });
 }
});

That’s it. Very simple proxy Lightning component. The component is invisible, so it won't break your UX.

Subscribe to our newsletter

Here is our example LWC component which uses this proxy:

import {LightningElement} from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class RefreshExampleLwc extends LightningElement {
 constructor() {
   super();

   document.addEventListener("lwc://refreshView", () => {
       const evt = new ShowToastEvent({
           title: "Info",
           message: "received refreshView event",
           variant: "info",
       });
       this.dispatchEvent(evt);
   });
 }

 refreshViews() {
   document.dispatchEvent(new CustomEvent("aura://refreshView"));
 }
}

As you can see - you will need to attach an event listener in the document and start listening for lwc://refreshView. For notifying the other components to refresh themselves - you can simply dispatch custom event aura://refreshView.