News

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.

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.