4

I have worked myself through several topics here on StackExchange already, finding this one to be the most helpful:

working with the refreshApex feature in LWC

However, the proposed solution does not work for me: Neither with a separate wire function nor with giving the result to a separate variable and using that one to refresh the page am I able to trigger a Refresh.

import { LightningElement, wire, track } from 'lwc';
import getDummy from "@salesforce/apex/msMCWF_PreInitiationCmpController.getDummyData"; 
import { refreshApex } from '@salesforce/apex';


export default class McwfPreInit extends LightningElement {
@track trackedSteps;
@track selectedStep;
@track noStepSelected = true;
@track loaded;
dataInCache;

@wire(getDummy) 
getSteps(result){
   this.dataInCache = result;
    var arr = [];
    if(result.data){
        arr = JSON.parse(JSON.stringify(result.data));
        arr.forEach(function(item){
            item.showAction = getShowAction(item);
            item.isDone = getIsDone(item);
        });
        this.loaded = true;
    }else if(result.error){
        console.log('oof');
    }
    this.trackedSteps = arr;

    function getShowAction(step){
        return step.bg !== 'green' && step.hasAction;
    }

    function getIsDone(step){
        return step.bg === 'green';
    }
}

get loaded(){
    return !!this.trackedSteps;
}

renderedCallback(){
    this.template.addEventListener('refreshsteps', this.refresh);
}

refresh(){
    console.log('event received');
    this.loaded = false;
    this.trackedSteps = {};
    return refreshApex(this.dataInCache);
}

changeSteps(event){
    this.trackedSteps = event.detail.steps;
    this.selectedStep = event.detail.target;
    this.noStepSelected = false;
}

}

This is the entirety of my JS For for now. As you can see, I am setting dataInCache to the result of my wired callout. This is also what was advised in the aforementioned thread. However I am still unable to get this to work as I am still getting this error message:

Uncaught (in promise) Error: Refresh failed because resolved configuration is not available.
at Object.e.refresh [as refreshApex] (lds.js:2)
at Object.refresh (mcwfPreInit.js:4)
at DocumentFragment.r (aura_prod.js:27)
at n (aura_prod.js:1)
at aura_prod.js:1
at Array.forEach (<anonymous>)
at u (aura_prod.js:1)
at HTMLElement.nt (aura_prod.js:1)
at HTMLElement.He.e.$$lwcEventWrapper$$ (aura_prod.js:1)
at u.dispatchEvent (aura_prod.js:3)

I have also tried to call the refresh directly from a Button on the parent component itself, but that in itself triggered a TypeError: t[Yn] is not a function error. Something I have yet to understand completely.

What do I need to do to finally be able to refresh my variable via a button on a child component?

3

Option 1:
It is because the scope of refresh method is not same as McwfPreInit when the event is fired. You need to use arrow function so that it will not have its own scope and the scope will always be same as McwfPreInit when event is fired.

refresh = () => {
    console.log('event received');
    this.loaded = false;
    this.trackedSteps = {};
    return refreshApex(this.dataInCache);
}

Option 2:
Instead of above confusion, you can just declare the event listener in the declaration of child component in HTML onrefreshsteps={refresh}

| improve this answer | |
  • Implementing both proper propagation and using the fat arrow notation seem to have done the trick, there's a few other things I need to get working to finally have the refresh do what it's supposed to, but that's for another time. Thank you! – dschib Dec 16 '19 at 10:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.