lwc wired variable in refreshApex throws "resolved configuration is not available"

Question

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?

Answer 1

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}