[SalesForce] Can’t get refreshApex() to work in lwc

I'm not able to get refreshApex() working in an lwc. I've read the docs here — scroll to the bottom. Here are the key elements of the js file:

import { LightningElement, track, api, wire } from 'lwc';
import getBlasts from '@salesforce/apex/Blast.getBlasts';
import { refreshApex } from '@salesforce/apex';

export default class BlastWaveTree extends LightningElement {
    @api recordId;
    @track blastData;
    @track error;
    @wire(getBlasts, { CampaignId: '$recordId' })
        wireBlastData({
            error,
            data
        }) {
            if (data) {
                let tempjson = JSON.parse(JSON.stringify(data).split('waves').join('_children'));
                this.blastData = tempjson;

        } else {
                this.error = error;
        }
    }

    @api
    refresh() {
        return refreshApex(this.blastData); 
    }

My code varies from the doc examples for 2 reasons:

  1. The example code doesn't separate out the Apex response into error and data, the pattern I've been following as shown elsewhere.
  2. This data is going into a lightning-tree-grid so I have to process it a bit before assigning it to blastData.

I've tried return refreshApex(this.wireBlastData) as well, and that doesn't work.

Ultimately, I want to call the refresh function from the parent component (hence, the @api), but I've simplified it (till I get it working) by calling the refresh function from a button on this same component. I added a console.log line in the refresh() function so I know the button is calling the function. It just doesn't refresh. I'm also watching the apex logs as I push the refresh button, and there's no apex activity.

Here's the template:

<template>
<lightning-card title="Blasts" icon-name="custom:custom3">
    <div slot="actions">
        <lightning-button-group >
            <lightning-button-icon icon-name="utility:refresh"  alternative-text="Refresh" onclick={refresh}></lightning-button-icon>
            <lightning-button label={buttonLabel} onclick={toggleWaves}></lightning-button> 
            <lightning-button label="New Blast" onclick={onNewBlast} variant="Brand"> </lightning-button>
        </lightning-button-group>
    </div>
    <div class="slds-m-around_medium">
        <lightning-tree-grid 
            data={blastData} 
            columns={columns} 
            key-field="id" 
            hide-checkbox-column="true" 
            onrowaction={handleRowAction} >
        </lightning-tree-grid>
    </div>
</lightning-card>

What am I missing?

Here's the error detail from the browser dev tools:

    lds.js:2 Uncaught (in promise) Error: Refresh failed because resolved configuration is not available.
    at Object.e.refresh [as refreshApex] (lds.js:2)
    at l.refresh (blastWaveTree.js:4)
    at callHook (aura_prod.js:24)
    at sa (aura_prod.js:2)
    at aura_prod.js:2
    at _ (aura_prod.js:2)
    at HTMLElement.e (aura_prod.js:2)
    at l (aura_prod.js:2)
    at Un.call.a (aura_prod.js:2)
    at Array.forEach (<anonymous>)
e.refresh   @   lds.js:2
refresh @   blastWaveTree.js:4
callHook    @   aura_prod.js:24
sa  @   aura_prod.js:2
(anonymous) @   aura_prod.js:2
_   @   aura_prod.js:2
e   @   aura_prod.js:2
l   @   aura_prod.js:2
Un.call.a   @   aura_prod.js:2
t   @   aura_prod.js:2
Lt  @   aura_prod.js:2
t.$$lwcEventWrapper$$   @   aura_prod.js:2

Best Answer

refreshApex will work only if you pass the complete response as argument.
In your case you are fetching response as (data, error) but while calling refreshApex() you are only passing the variable holding the data as argument.

Related Topic