Datatable not refreshing after delete

lightning-datatablelightning-web-components

I have a use case where I am fetching records by searching and showing them in a datatable. After that using checkboxes I select some records and delete them. But the problem is after deleting the datatable does not show the updated records.

html –>

<template>
    <lightning-card>

        <h3 slot="title">
            <img src={stupng} width="42" height="30" style="vertical-align:top">
                Student Informations
        </h3>

        <lightning-layout multiple-rows="true" vertical-align="end">
            <lightning-layout-item size="12" small-device-size="4" medium-device-size="2" padding="around-small">
                <div class="slds-form-element">
                    <div class="slds-form-element__control">
                        <lightning-combobox title="Search student" label="Enter Detail" value={studentSearchParameter} placeholder="--Select--"
                        options={options} onchange={handleOptionChange} required></lightning-combobox>
                    </div>
                </div>
            </lightning-layout-item>

            <lightning-layout-item size="12" small-device-size="4" medium-device-size="2" padding="around-small">
                <lightning-button title="Search Button" label="Search" variant="brand" icon-name="utility:search" 
                icon-position="right" onclick={handleStudentSearch}></lightning-button>
            </lightning-layout-item> 
            
            <lightning-layout-item size="12" small-device-size="4" medium-device-size="2" padding="around-small">
                <lightning-button title="Delete Button" label="Delete" size="small" variant="brand" icon-name="utility:delete" 
                icon-position="right" onclick={deleteStudentRowAction}></lightning-button>
            </lightning-layout-item> 
        </lightning-layout>     
        
        <div> 
            <lightning-datatable
                key-field="Id"
                data={studentRec}
                columns={c}
                onrowselection={getSelectedIdAction}>   
            </lightning-datatable>
        </div>

    </lightning-card> 
</template>

js –>

import { LightningElement, track, api, wire } from 'lwc';
import searchStudent from '@salesforce/apex/lwcStudentSearch.searchStudent';
import deleteMultipleStudentRecord from '@salesforce/apex/lwcStudentSearch.deleteMultipleStudentRecord';
import {ShowToastEvent} from 'lightning/platformShowToastEvent'
import studentlogo from '@salesforce/resourceUrl/studentlogo'
import { refreshApex } from '@salesforce/apex';

const columns = [
{ label: 'Student Name', fieldName: 'Name' },
{ label: 'Roll Number', fieldName: 'Roll_Number__c', type:'Number'},
{ label: 'Location', fieldName: 'Geo_Location__c', type: 'Lookup' },
];

const options = [
    {label:'Aaron',value:'Aaron'},
    {label:'Aayush',value:'Aayush'},
    {label:'Prakriti',value:'Prakriti'},
    {label:'Krishna',value:'Krishna'},
    {label:'Akash',value:'Akash'},
    {label:'Sourav',value:'Sourav'},
    {label:'Prakash',value:'Prakash'},
    {label:'David',value:'David'},
    {label:'Rohit',value:'Rohit'},
    {label:'Christian',value:'Christian'},
    {label:'Katy',value:'Katy'},
    ];

export default class LwcStudentSearch extends LightningElement {

@track studentRec;
searchValue = '';
c=columns
stupng = studentlogo
@track options=options;
@api selectedStudentIdList=[];

handleOptionChange(event) {       
   this.searchValue = event.detail.value;
}

handleStudentSearch() {
    
    if (this.searchValue !== '') {
        searchStudent({
            searchKey: this.searchValue                   
            })
        .then(result => {
            this.studentRec = result;
            })
                       
    } else {
        
        const event = new ShowToastEvent({
            variant: 'error',
            message: 'Search text missing....',
        });
        this.dispatchEvent(event);
    }
}

getSelectedIdAction(event){
    const selectedStudentRecords = event.detail.selectedRows;
    this.selectedStudentRecords=[];
    
    for (let i = 0; i<selectedStudentRecords.length; i++){
        this.selectedStudentIdList.push(selectedStudentRecords[i].Id);
    } 
}

deleteStudentRowAction(){
  deleteMultipleStudentRecord({studObj:this.selectedStudentIdList})
    .then(()=>{
        this.template.querySelector('lightning-datatable').selectedStudentRecords=[];

        const toastEvent = new ShowToastEvent({
            title:'Success!',
            message:'Record(s) deleted successfully',
            variant:'success'
          });
          this.dispatchEvent(toastEvent);

          
    })
    return refreshApex(this.studentRec);
}
 
}

Aura Class –>

public with sharing class lwcStudentSearch {

@AuraEnabled(cacheable=true)    
public static list<Student__c> searchStudent(string searchKey){

    string searchKeyword = '%' + searchKey + '%';
        
    list<Student__c> studentListRecord = new list<Student__c>();
       
        for(Student__c stuObj : [Select Name, Roll_Number__c, Geo_Location__r.Name
                            From Student__c
                            WHERE Name LIKE : searchKeyword]){
           studentListRecord.add(stuObj);
        }
                
        return studentListRecord;
    }


@AuraEnabled
public static List<Student__c> deleteMultipleStudentRecord(List<String> studObj){
    List<Student__c> stuObjItem = new   List<Student__c>();
    List<Student__c> stuObjList = [Select Id, Name  From Student__c Where Id IN:studObj];
    
    for(Student__c con:stuObjList){
        stuObjItem.add(con);
      }
    if(stuObjItem.size()>0){
        try{
            delete stuObjItem;           
          }
        catch (Exception exp) {
            throw new AuraHandledException(exp.getMessage());
        }
      }
      return stuObjItem;
    }
}

I am quite new and learning LWC, please excuse any silly mistakes I have made.

Best Answer

As stated in the documentation

The refreshApex() function doesn't refresh data that was fetched by calling an Apex method imperatively.

So instead of calling refreshApex() you should just call handleStudentSearch();

deleteStudentRowAction(){
    deleteMultipleStudentRecord({studObj:this.selectedStudentIdList})
    .then(()=>{
        this.template.querySelector('lightning-datatable').selectedStudentRecords=[];

        const toastEvent = new ShowToastEvent({
            title:'Success!',
            message:'Record(s) deleted successfully',
            variant:'success'
        });
        this.dispatchEvent(toastEvent);

        this.handleStudentSearch();
    });
}

Call it in the then callback body ensures handleStudentSearch() would run only after the records deletion.