0

I'm creating a custom object record using uiRecordApi's createRecord method. Record creation is successful, but after that it's not refreshing the lwc to display the updated results. Below is my code.

HTML:-

<lightning-input type="text" label="Test Label 1" name = "test1"></lightning-input>
<lightning-input type="checkbox" label="Test Label 1" name = "test2"></lightning-input>
<button class="slds-button slds-button_brand" onclick={createNewRec} title="Create">Create</button>

JS:-

createNewRec(event) {
    let allValues = this.template.querySelectorAll('lightning-input');
    allValues.forEach(function(element){
        if(element.name=="test1") {
            this.newText=element.value;
        }
        if(element.name=="test2") {
            this.newCheck=element.checked;
        }
    },this);
    const recordInput = {
        "apiName": "TestObj__c",
        "fields" : {
          "Name": this.newText
        }
      };
    createRecord(recordInput)
        .then(result => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: "Success",
                    message: "List View created successfully!",
                    variant: "success"
                })
            );
            this.recList.push({value:result.fields.Name.value, label:result.fields.Name.value}); //adding the latest created record to the list to display the updated records name in combobox
        })
        refreshApex(this.recListFinal);
}

@wire(fetchRecords, { objectName: "$objectName" }) custObjRecs(result) {
    this.recList = result;
    if (result.data) {
        let options = [];
        for(let i in result.data) {
            if(result.data.hasOwnProperty(i)) {
                options.push({value:result.data[i].Name, label:result.data[i].Name});
            }
        } 
        this.finalCustFiltersList = options;
    }
}

But on trying refreshApex wire method is not getting called at all. I'm new to LWC so not sure what am I missing here. Please help me out.

1 Answer 1

0

Imperative apex methods run as asynchronous JS, i.e. promises. You will need to call the refresh apex method after the promise is fulfilled/rejected. i.e. in the then/catch method of the promise. But you are calling refreshApex after the Promise call. Which will always run before the promise is settled.

createRecord(recordInput)
    .then(result => {
        this.dispatchEvent(
            new ShowToastEvent({
                title: "Success",
                message: "List View created successfully!",
                variant: "success"
            })
        );
        this.recList.push({value:result.fields.Name.value, label:result.fields.Name.value}); //adding the latest created record to the list to display the updated records name in combobox
        refreshApex(this.recListFinal);
    }) // anything that is outside this will be executed immediately without waiting for promise to settle, i.e. apex call.

An alternate way is to use async/await.

async asyncCall() {
    // ...
    const result = await createRecord(recordInput);
    console.log(result);
    // ...
    refreshApex(this.recListFinal);
}
    
4
  • Should I call asyncCall() method after createRecord? It seems hasn't got called
    – sfMon
    Jul 8, 2021 at 16:48
  • @sfMon no, it's an alternative way, did you try the code from the first block? Jul 8, 2021 at 17:21
  • My bad !! Thanks a ton Rahul !! It worked.
    – sfMon
    Jul 8, 2021 at 17:30
  • Welcome, you can mark the answer as accepted if it worked for you! Jul 8, 2021 at 17:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.