0

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);

    }
. . . . 
6
  • 1
    have you tried decorating taskResourceResults with track. although track is normally not required now it is still required on objects/arrays to make it reactive to internal properties and taskResourceResults is nested object. moreover place html template code inside template if to make it lazy loaded only when taskResourceList is not empty Feb 11, 2023 at 18:32
  • . moreover place html template @gaurav - code inside template if to make it lazy loaded Can you explain this further?
    – mackmama
    Feb 11, 2023 at 19:57
  • 1
    <template for:each={taskResourceList} for:item="mr">. you are iterating over taskResourceList but taskResourceList will not alway have data because wire will run mutiple times. you only want to render your page if taskResourceList have data so check it in template:if and dispaly accordingly. did track solved the issue? Feb 11, 2023 at 21:51
  • 1
    why are you returning refreshApex?
    – Nick C
    Feb 12, 2023 at 5:17
  • idk - going from an example @NickCook
    – mackmama
    Feb 19, 2023 at 20:28

1 Answer 1

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);
}
2
  • But wouldn't the refreshApex in mackmama's handleSuccess function still worked?
    – Nick C
    Feb 12, 2023 at 23:10
  • I ended up calling the function directly, removing wire, and calling it directly onsuccess
    – mackmama
    Feb 19, 2023 at 20:30

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .