Refresh child LWC component from Aura component

Question

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.

Answer 1

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);
            }