How to refresh the LWC after using createRecord

Question

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.

Answer 1

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