I am clicking delete record and record are getting deleted but it does not refresh the table in LWC

Question

<template>
<lightning-card>

     <div class="slds-align_absolute-center" style="height: 3rem;">
       <lightning-input type="search" onchange={handleKeyChange} class="slds-m-bottom_small" label="Search" value={searchKey}></lightning-input>
     </div>
     <div class="slds-clearfix">
        &nbsp;&nbsp;&nbsp;
           <div class="slds-align_absolute-center" style="display: unset;">
                 <span class="slds-badge" style="background-color:#16dfbd;color:azure;">Selected Contacts:{selectedCount}</span>
            </div>
            &nbsp;
            <div class="slds-align_absolute-center" style="display: unset;">
                 <span class="slds-badge" style="background-color:#90cb31;color:azure;" >Total Contacts : {totalRecords}</span>
            </div>

             <div class="slds-float_right" style="height:1rem; margin-right: 2rem;">
                 <lightning-button variant="destructive" label="Delete" onclick={deleteSelected}> </lightning-button>
              </div>

            </div>
            <div class="slds-align_absolute-center" style="height: 2rem;">
               </div>
               <template if:true={contacts}>
               <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
                <thead>
                   <tr class="slds-text-title_caps">
                      <th style="width:3.25rem;" class="slds-text-align_right">
                         <div class="slds-form-element">
                            <div class="slds-form-element__control">
                               <label class="slds-checkbox">
                                  <!--header checkbox for select all-->
                                  <lightning-input type="checkbox" onchange={selectAll}></lightning-input>
                               </label>
                            </div>
                         </div>
                      </th>
                      <th>
                         <span class="slds-truncate" title="Name">First Name</span>      
                      </th>
                      <th>
                         <span class="slds-truncate" title="Last Name">Last Name</span>
                      </th>
                      <th>       
                         <span class="slds-truncate" title="Department">Department</span>
                      </th>
                      <th >
                         <div class="slds-truncate" title="MobilePhone">Mobile Phone</div>
                      </th>
                   </tr>
                </thead>
                <tbody>

                     <template for:each={contacts} for:item="con">
                      <tr key={con.Id}>
                         <td class="slds-text-align_right" style="width:3.25rem;">
                            <div class="slds-form-element">
                               <div class="slds-form-element__control">
                                  <label class="slds-checkbox">
                                    <lightning-input type="checkbox" text={con.Id} value={con} onchange={handleKeyChanges}></lightning-input>
                                  </label>
                               </div>
                            </div>
                         </td>
                         <td>
                            <div class="slds-truncate" title={con.Name}><a>{con.Name}</a></div>
                         </td>
                         <td>
                            <div class="slds-truncate" title={con.LastName}>{con.LastName}</div>
                         </td>
                         <td>
                            <div class="slds-truncate" title={con.Department}>{con.Department}</div>
                         </td>
                         <td >
                            <div class="slds-truncate" title={con.MobilePhone}>{con.MobilePhone}</div>
                         </td>
                      </tr>
                  </template>

                </tbody>
             </table>
           </template>

</lightning-card>

import { LightningElement, track,wire,api } from 'lwc';
import getContactList from 
'@salesforce/apex/ContactController.getContactList';
import deleteContacts from 
'@salesforce/apex/ContactController.deleteContacts';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';


export default class GetContacts extends LightningElement {
    @track searchKeyWord = '';
    @track selectedCount = 0;
    @api contacts;
    @track selectedIds =[];
    @track error;
    @track totalRecords = 0;
    @api successMessage = 0;
    @track checkBoxArray = [];
    @track isAnyCheckBoxSelected = false;

    @wire(getContactList, { searchKeyWord: '$searchKeyWord' })
    wiredContacts({ error, data }) {
        if (data) {
            this.wiredContactResult = data;
            this.contacts = data;
            this.totalRecords = data.length;
            this.error = undefined;

        } else if (error) {
            this.error = error;
            this.contacts = undefined;
        }
    }

    handleKeyChange(event) {
        const searchKey = event.target.value;
        this.searchKeyWord = searchKey;
    }

    handleKeyChanges(event) {
        const newValue = event.target.value; 
        if(event.target.checked) {
            this.selectedCount += 1;
            this.selectedIds.push(newValue) 
            this.isAnyCheckBoxSelected =true;
        }
        else {
            this.selectedCount -= 1;
            this.selectedIds = this.arrayRemove(this.selectedIds, newValue);
            if(this.selectedIds.length === 0){
                this.isAnyCheckBoxSelected = false;
            }
        }

    }
    arrayRemove(array, value) {
        return array.filter(function(ele){
            return ele !== value;
        });
    }

    deleteSelected(){
        deleteContacts({
            contactIds :this.selectedIds
        }) 
        .then(result => {
            this.contacts = null;
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: result,
                    variant: 'success',
                }),
            );
            return refreshApex(this.wiredContactResult);

        })
        .catch(error => {
            this.error = error;
        });
    }
    selectAll(event){
        for(let i =0; i<this.contacts.length;i++) {
            this.selectedIds.push(this.contacts[i].Id);
        }
        this.checkBoxArray = this.template.querySelectorAll('lightning-input');
        for (let i = 0; i <this.checkBoxArray.length; i++) {
            if (this.checkBoxArray[i].type === 'checkbox') {
                if(event.target.checked) {
                    this.checkBoxArray[i].checked = true;
                    this.isAnyCheckBoxSelected =true;
                    this.selectedCount += 1;
                }
                else {
                    this.checkBoxArray[i].checked = false;
                    this.isAnyCheckBoxSelected =false;
                    this.selectedCount = 0;
                }
            }
        }
    }
}

Answer 1

An issue is at least the following: you declare @api contacts and then try to modify the value this.contacts = data. Properties decorated with @api are read-only to the component; the parent component controls the value. That makes your change to this.contacts a noop and thus you don't observe the change.

From https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.js_props_public

A component that declares a public reactive property can only set its default value. A parent component that uses the component in its markup can set the component’s public property value.

We recently enabled many LWC engine warnings when you enable Lightning Debug Mode. You can see these warnings in the browser's dev tools. You'll observe a message like this:

[LWC warning]: If property contacts decorated with @api in [object:vm undefined (68)] is used in the template, the value [Object object] set manually may be overridden by the template, consider binding the property only in the template.

Answer 2

Your 'this.contacts' isnt getting updated. I would say from UI perspective, add a Refresh button & call your apex on click of it. So you will get updated List everytime.