lwc refresh not working as expected

Question

refreshApex isn't working for me. I'm calling it at the end of my submit and onsuccess functions but I guess I have it configured incorrectly. After I submit/save on the lightning-record-edit-form my table is empty. I refresh the browser and I see my changes. Does anyone know how to get this working?

html

            <template for:each={taskResourceList} for:item="mr">
                <div key={mr.Id} class="">
                    <lightning-record-edit-form 
                        record-id={mr.Id}
                        object-api-name="Mission_Resource__c" 
                        data-id={mr.Id}
                        onsuccess={handleSuccess} 
                        onerror={handleError} 
                        onsubmit={handleSubmit}>

                        <div class="slds-grid slds-wrap slds-grid_vertical-stretch slds-border_bottom slds-size_12-of-12">
                            <div class="slds-size_2-of-12 slds-border_right">
                                <div class=" slds-m-right_medium slds-m-top_xxx-small slds-m-bottom_xxx-small">
                                    <lightning-input-field 
                                        variant="label-hidden" 
                                        onchange={handleChange} 
                                        data-id={mr.Id} 
                                        field-name="Status__c" 
                                        value={mr.Status__c}>
                                    </lightning-input-field>
                                </div>
                            </div>
 . . . .

js

import { LightningElement, wire, track, api } from 'lwc';
import getTaskResources from '@salesforce/apex/RROSResourceListController.getTaskResources';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';
    
export default class RrosResourceTableForTaskDetail extends LightningElement {
    @api recordId;
    @track taskResourceList;

    editTable = true;
    buttonVisible = false;

    @track productAnswerMap;

    taskResourceResults = null;

    @wire(getTaskResources, {taskId : '$recordId'})
    wiredResources(result) {
        this.taskResourceResults = result;
        if (result.data) {
            console.log('result.data ----  ', result.data);
            this.taskResourceList = result.data
        } else {
            console.log('result.error ----  ', result.error);
            this.error = result.error
        }
    }

    recordId;
    handleSuccess(event) {
        this.recordId = event.detail.id;
        const button = this.template.querySelector("lightning-button[data-id='" + this.recordId + "']");
        if (button) {
            button.classList.add("slds-hide");
        }

        const toast = new ShowToastEvent({
                                title: 'Updated',
                                message: 'Resource Updated Successfully!',
                                variant: 'success',
                                mode: 'dismissable'
                                });
        this.dispatchEvent(toast);

        return refreshApex(this.taskResourceResults);
    }
    
    handleSubmit(event) {
        let recordId = event.currentTarget.dataset.id;
        console.log('--------handleSubmit--------', recordId);
        event.preventDefault(); // stop the form from submitting
        const fields = event.detail.fields;

        fields.Quantity__c = Number(fields.Quantity__c) - Number(fields.Quantity_Filled__c);
        fields.Id = recordId;            
        this.template.querySelector("lightning-record-edit-form[data-id='" + recordId + "']").submit(fields);
        return refreshApex(this.taskResourceResults);

    }
. . . . 

Answer 1

The refreshApex function should be called after updating the data in the database. In your code, you are calling refreshApex in both the handleSuccess and handleSubmit functions, but there is no guarantee that the data will have been updated in the database at that point.

You can move the refreshApex call to the end of the handleSuccess function, as this function is triggered only after the record is successfully saved to the database.

Here's the updated code:

handleSuccess(event) {
  this.recordId = event.detail.id;
  const button = this.template.querySelector("lightning-button[data-id='" + this.recordId + "']");
  if (button) {
    button.classList.add("slds-hide");
  }

  const toast = new ShowToastEvent({
    title: 'Updated',
    message: 'Resource Updated Successfully!',
    variant: 'success',
    mode: 'dismissable'
  });
  this.dispatchEvent(toast);

  refreshApex(this.taskResourceResults);
}

handleSubmit(event) {
  let recordId = event.currentTarget.dataset.id;
  console.log('--------handleSubmit--------', recordId);
  event.preventDefault(); // stop the form from submitting
  const fields = event.detail.fields;

  fields.Quantity__c = Number(fields.Quantity__c) - Number(fields.Quantity_Filled__c);
  fields.Id = recordId;            
  this.template.querySelector("lightning-record-edit-form[data-id='" + recordId + "']").submit(fields);
}