AURA and LWC Refresh by Each Others

This code will help to refresh AURA and LWC to each other.

Use case :-

Suppose that you are using AURA components and LWC components on any of lightning record page and these components should be refreshed when user try to update any fields on standard record page. but now you can see all components don’t have any connection with lightning record page for communication between each others. So in this situation below code will helpful for us.

If you want to refresh AURA component, then you need to use below line of code in AURA component:-

<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) {
   // this line refresh the LWC components
   document.dispatchEvent(new CustomEvent("lwc://refreshView")); 
 },

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

For Refresh LWC components you need to use same proxy in LWC components.

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

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

 // below code will get refresh information from AURA
   document.addEventListener("lwc://refreshView", () => {
       const evt = new ShowToastEvent({
           title: "Info",
           message: "received refreshView event",
           variant: "info",
       });
       this.dispatchEvent(evt);
   });
 }

 refreshViews() {  
   //this method will dispatch refresh view to AURA component for refresh action
   document.dispatchEvent(new CustomEvent("aura://refreshView"));
 }
}

uniquesymbol