Working with rereshApex async call in LWC

Question

I am trying to work with refreshApex call in LWC to get the refreshed values for the wired data.

@track records;
@wire(getRecords)
wiredRecords({error, data}) {
    if (data) {
        this.records = data;
        this.error = undefined;
    } else if (error) {
        this.records = undefined;
        this.error = 'Unknown error';
    }
}

//here refresh gets invoked from within the code on inline edit handleSave call
refresh() {
    // notifyLoading sets and unsets spinner property
    this.notifyLoading(true);
    console.log('refresh apex started')
    refreshApex(this.records)
        .then(() => {
            this.notifyLoading(false);
            console.log('refresh apex complete');
        }).catch(() => this.notifyLoading(false));
}

In this example execution enters the refresh call and I can see the 'refresh apex started' in the console and the spinner on the screen but it never reaches refresh apex complete which tells me execution never reaches then part of the refreshApex call.

Is there any obvious mistake here or am I doing something wrong. I tried following examples shown here in documentation and in lwc-recipe.

Answer 1

Just documenting answer to this issue which was not very clear from any of the examples I came across in the documentation and lwc-recipe examples.

mistake in the above example was,

refreshApex(this.records)

this.records that is passed to refreshApex is assigned only with the data attribute from the wired result and not the entire result, like this

this.records = data;

correcting it to

wiredResults;
records;
wiredRecords(results) {
this.wiredResults = results;
    if (results.data) {
        this.records = results.data;
        this.error = undefined;
    } else if (results.error) {
        this.records = undefined;
        this.error = 'Unknown error';
    }
}

and then, using wiredResults in refreshApex call (complete result)

refresh() {
// notifyLoading sets and unsets spinner property
this.notifyLoading(true);
console.log('refresh apex started')
refreshApex(this.wiredResults)
    .then(() => {
        this.notifyLoading(false);
        console.log('refresh apex complete');
    }).catch(() => this.notifyLoading(false));
}

Fixed the issue for me. Thank you @sfdcfox for his comment on this post which helped me realize the issue and fix it.