[SalesForce] Refresh child LWC component from Aura component

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.

Best Answer

The issue you are having is with how you are saving the response value you get back from the wire method. you are capturing it as a generic object {data,error} however you aren't saving that to a variable external from the wire method. In order to use RefreshApex you have to pass in the response you get back from the wire method like below. 

    @track oppResponse;

    @wire(getOppList, { groupLabel: '$profileGroup', recordId: '$recordId' })
                wiredFlows(response) {
                    this.oppResponse = response;
                    let data = response.data;
                    let error = response.error;
                    if (data) {
                        this.error = undefined;
                        this.outputData = data;
                    } else if (error) {
                        this.error = error;
                        this.outputData = undefined;
                    }
                }
     @api forceRefreshInitiated() {
                refreshApex(this.oppResponse);
            }
Related Topic