Dear All,

I receive this error when I try to implement my LWC component
"afterRender threw an error in 'c:contactListDemo' [Cannot read property 'data' of undefined]"
even I use if condition to test if there are data
//class********************************
ContactAuraService.cls
****************************************
public with sharing class ContactAuraService {
    public ContactAuraService() {
    }
    @AuraEnabled(cacheable=true)
    public static List<sObject> getContactList(String name){
        String key = '%' + name + '%';
        String Query = 'Select Id, Name, Email, Phone from Contact Where Name LIKE : key' ;
        return Database.query(query); 
    }
    @AuraEnabled(cacheable=true)
    public static List<sObject> getAccountList(String name){
        String key = '%' + name + '%';
        String Query = 'Select Id, Name, Industry from Account Where Name LIKE : key';
        return Database.query(query);         
    }
}
*************************************************
contactListDemo.js
*************************************************
import { LightningElement, wire, track } from 'lwc';
import getContactList from '@salesforce/apex/ContactAuraService.getContactList';
export default class createContactDemo extends LightningElement {
    @track searchKey;
    @track contacts;
    @track Objerror;
    @wire(getContactList, {
        name : '$searchKey'
    })
    wiredContact({error, data}){
        if(data){
            this.contacts  = data;
        }
        if(error){
            this.Objerror=error;
            /*eslint-disable no-console */
            console.log('Error', error);
        }
    }
    //Data - Error
    // contacts.data
    // contacts will contain the data and error.
    // contact.data and contact.error
    handleChange(event){
        event.preventDefault();
        /*eslint-disable no-console */
        console.log('Value' + event.target.value);
        console.log(this.contacts);
        this.searchKey = event.target.value;
    }
}
***************************************************
contactListDemo.html
***************************************************
<template>
    <lightning-card title="Contact List" icon-name="Standard:contact">
        <lightning-layout vertical-align="center">
            <lightning-layout-item padding="around-small">
                <lightning-input label="Find Contact" value={searchKey} onchange={handleChange}>
                </lightning-input>
            </lightning-layout-item>
        </lightning-layout>
        <lightning-layout vertical-align="center">
                    <template if:true={contacts.data}>
                        <template for:each={contacts.data} for:item="contact">
                            <lightning-layout-item key={contact.key} item-padding="around-small">
                                <p>{contact.Name}</p>
                                <p><lightning-formatted-email value={contact.Email></lightning-formatted-email></p>
                                    <p><lightning-formatted-phone value={contact.Phone}></lightning-formatted-phone></p>
                            </lightning-layout-item>
                        </template>
                    </template>
        </lightning-layout>
    </lightning-card>
</template>
******************************************************
contactListDemo.js-meta.xml
******************************************************
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="contactListDemo">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Contact List Demo </masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
        <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>
******************************************************