Parent-Child Child-Parent Event Communication Refresh LWC Component on Wire

Apex 

  @AuraEnabled(cacheable=true)

    public static List<Account> getAccounts(){

        return [Select Id,Name,Industry,phone from Account where Industry!=Null and Phone!=null limit 10];

    }

Parent 

<template>

    <lightning-card title="Decorate a Function with @wire" icon-name="custom:custom63">

        <div class="slds-m-around_medium">

            <template if:true={accounts}>

                    <!-- Passing accountList to child -->

                <c-account-List-Item accounts={accounts}  onneedrefresh={refreshApex}

                ></c-account-List-Item>

            </template>

            <template if:true={error}>

                {error}

            </template>

        </div>

    </lightning-card>

</template>

import { LightningElement,wire,api,track } from 'lwc';

import getAccountList from '@salesforce/apex/AccountController.getAccounts';

import { refreshApex } from '@salesforce/apex';

export default class GetAccountData extends LightningElement {

   

  @track accounts = [];

  @track error;

  @track wiredAccountList = [];

  @wire(getAccountList) accList(result) {

    this.wiredAccountList = result;

    if (result.data) {

      this.accounts = result.data;

      this.error = undefined;

    } else if (result.error) {

      this.error = result.error;

      this.accounts = [];

    }

  }

 //Calling refresh Apex Function

  refreshApex(event) {

       refreshApex(this.wiredAccountList);

     }

}

Child

<template>

   

                 <table class="slds-table slds-table_bordered slds-table_cell-buffer">

        <thead>

            <tr class="slds-text-title_caps">

                <th scope="col">

                    <div class="slds-truncate" title="S.No">S.NO</div>

                </th>

                <th scope="col">

                    <div class="slds-truncate" title="Account Name">Account Name</div>

                </th>

                <th scope="col">

                    <div class="slds-truncate" title="Account Industry">Account Industry</div>

                </th>

                <th scope="col">

                    <div class="slds-truncate" title="Account Phone">Account Phone</div>

                </th>

                <th scope="col">

                    <div class="slds-truncate" title="Action">Action</div>

                </th>

            </tr>

        </thead>

        <tbody>

            <template for:each={accounts} for:item="account" for:index="index">

                <tr key={keyIndex}>

                    <td>{index}</td>

                    <td>

                        {account.Name}

                    </td>

                    <td>

                        {account.Industry}

                    </td>

                    <td>

                       {account.Phone}

                    </td>

                    <td>

                     <lightning-button-icon

                    icon-name="utility:delete"

                    value={account.Id}

                    onclick={deleteAccount}

                    data-recordid={account.Id}

                     ></lightning-button-icon>        

                    </td>

                </tr>

            </template>

        </tbody>

    </table>     

</template>

accountListItem.Js

import { LightningElement,api } from 'lwc';

import { deleteRecord } from 'lightning/uiRecordApi';

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class AccountListItem extends LightningElement {

 

@api recordId;

@api accounts;

  

    deleteAccount(event){

    //  alert('button executing');

        this.recordId=event.target.value;

        

        deleteRecord(this.recordId)

                .then(() => {

                    this.dispatchEvent(

                        new ShowToastEvent({

                            title: 'Success',

                            message: 'Record deleted',

                            variant: 'success'

                        })

                    );

                

                

                })

                .catch(error => {

                    this.dispatchEvent(

                        new ShowToastEvent({

                            title: 'Error deleting record',

                            message: error.body.message,

                            variant: 'error'

                        })

                    );

                });

                //Disptaching Event to Parent

                this.dispatchEvent(new CustomEvent('needrefresh',null));

    }

}