Trying to refresh child LWC component from parent Aura component. Here is some of the code I have so far:
Aura Component:
<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:hasSObjectName" access="global">
<aura:handler event="force:refreshView" action="{!c.handleForceRefreshViewForLWC}" />
<c:childlwccomponent aura:id="childlwccomponent" onlaunchflow="{!c.runFlow}" flowGroup="{!v.flowGroup}" recordId="{!v.recordId}" objectApiName="{!v.sObjectName}"/>
</aura:component>
Aura Controller:
({
handleForceRefreshViewForLWC : function(component, event, helper) {
component.find("childlwccomponent").forceRefreshInitiated();
},
})
LWC pubsub equivalent:
const events = {};
const samePageRef = (pageRef1, pageRef2) => {
const obj1 = pageRef1.attributes;
const obj2 = pageRef2.attributes;
return Object.keys(obj1)
.concat(Object.keys(obj2))
.every(key => {
return obj1[key] === obj2[key];
});
};
/**
* Fires an event to listeners.
* @param {object} pageRef - Reference of the page that represents the event scope.
* @param {string} eventName - Name of the event to fire.
* @param {*} payload - Payload of the event to fire.
*/
const fireEvent = (pageRef, eventName, payload) => {
if (events[eventName]) {
const listeners = events[eventName];
listeners.forEach(listener => {
if (samePageRef(pageRef, listener.thisArg.pageRef)) {
try {
listener.callback.call(listener.thisArg, payload);
} catch (error) {
// fail silently
}
}
});
}
};
export {
fireEvent
};
LWC component I want to refresh JS:
import { LightningElement, api, wire, track } from 'lwc';
import { fireEvent } from 'c/pubsub';
import { refreshApex } from '@salesforce/apex';
import getData from '@salesforce/apex/OpportunityDataController.getOppList';
export default class ApexWireMethodToProperty extends LightningElement {
@api profileGroup;
@api recordId;
@api objectApiName;
@track outputData = [];
@track error;
//fireEvent;
@wire(getOppList, { groupLabel: '$profileGroup', recordId: '$recordId' })
wiredFlows({ error, data }) {
if (data) {
this.error = undefined;
this.outputData = data;
} else if (error) {
this.error = error;
this.outputData = undefined;
}
}
@api
forceRefreshInitiated() {
console.log('---event fired---');
fireEvent(this.pageRef, 'forceRefresh');
//eval("$A.get('e.force:refreshView').fire();");
//$A.get('e.force:refreshView').fire();
//return refreshApex(this.profileGroup, this.recordId);
}
}
I get to the console line inside forceRefreshInitiated() but I'm unable to refresh component. Appreciate your help.