Execute js method in lwc after changes in apex

Question

I have an issue. I have lwc lightning-table, with editable column. When i edit column, i send new data to apex to update records. I have an on update trigger which recalculate another fields on this object and this field is either in my lwc table. I want it to be updated after my trigger executed. No if i try to call update apex method and then call get apex method, it returns old data. My code :

<template>
    <lightning-datatable
        key-field="Id"
        data={data}
        columns={columns}
        oncellchange= {handleChange}
        hide-checkbox-column
        onsave={handleSave}
        draft-values={draftValues}
        >
    </lightning-datatable>
</template>

import { LightningElement,api,wire,track } from 'lwc';

import getForecasts from '@salesforce/apex/RelatedForecastTableController.getForecasts';
import updateForecasts from '@salesforce/apex/RelatedForecastTableController.updateForecasts';

const columns = [
    { label: 'Month', fieldName: 'Month__c', type: 'text' },
    { label: 'Forecast', fieldName: 'Year__c', type: 'text' },
    { label: 'GainMonth', fieldName: 'GainMonth__c', type: 'number' , editable: true},
    { label: 'GainSum', fieldName: 'GainSum__c', type: 'number'}
];

export default class ForecastsAndIncome extends LightningElement {
    @api recordId;
    @track data = [];
    @track columns = columns;
    draftValues = [];
 

    @wire(getForecasts, { oppId: '$recordId' })
    wiredGetForecasts(result) {
        if (result) {
            this.data = result.data;
        } else if (result.error) {
            console.log(result.error);
        }
    }

    handleChange(event){
        let draftValue = event.detail.draftValues;
        let tempObj = [];
        try {
        for(var obj in this.data) {
            tempObj[obj] = {};
            for (var prop in this.data[obj]) {
                if (Object.prototype.hasOwnProperty.call(this.data[obj], prop)) {
                    tempObj[obj][prop] = this.data[obj][prop];
                }
            }
            if(this.data[obj].Id == draftValue[0].Id) {
                tempObj[obj].GainMonth__c = draftValue[0].GainMonth__c;
            }
        }
        }
        catch(e) {
            console.log('e = ' + e)
        }
        this.data=tempObj;
        
    }

    handleSave() {
        try {
            updateForecasts({forecasts : this.data}).then(() => {
                // this is my apex method which update data
                // when i try to get new data and update it in my table, i get the previous data because it have't been updated yet
            })
            
            this.draftValues = [];
        }
        catch(e) {
            console.log('e = ' + e)
        }
    }

}

Any work arounds? I see the only solution to recalculate data in javascript but i don't really want to recalculate two times.

Answer 1

use an imperative method instead of wire method in renderCallback, call the renderCallBack after the updation.

handleSave() {
    try {
        updateForecasts({forecasts : this.data}).then(() => {
            this.renderCallback();
        })
            
        this.draftValues = [];
    }
    catch(e) {
        console.log('e = ' + e)
    }
}

please use boolean inside the renderCallback to avoid multiple apex call.