When adding a wire method into lwc I got error on page

Question

I did some small changes based on the lwc-recipes, apex series. But I am getting an error telling me e[ki] is not a function, which is obviously from some library code. And I find it hard to debug into it. That error comes from the wire function. If I remove that particular line, the issue is gone.

My apex code:

public class displaySampleContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactsByName(String searchKey){
        if (String.isBlank(searchKey)) {
            return new List<Contact>();
        }
        String key = '%' + searchKey + '%';
        return [SELECT Id, Name, Title, Phone, Email, Picture__c 
                FROM Contact 
                WHERE Name LIKE :key 
                AND Picture__c != null 
                LIMIT 1];
    }
}

js:

import { LightningElement, track, wire } from 'lwc';
import getContactsByName from '@salesforce/apex/DisplaySampleContactController.getContactsByName';

export default class DisplaySampleContact extends LightningElement {
    @track contactName = '';
    @track searchKey = '';

    @wire(getContactsByName, {searchKey: '$searchKey'})
    contacts; //This is the line which causes the page to break

    handleKeyChange(event) {
        this.contactName = event.target.value;
    }

    handleSearch(event) {
        this.searchKey = this.contactName;
    }
}

html:

<template>
    <lightning-card
        title="DisplaySampleContact"
        icon-name="custom:custom63"
    >
        <div class="slds-m-around_medium">
            <lightning-layout vertical-align="end" class="slds-m-bottom_small">
                <lightning-layout-item flexibility="grow">
                    <lightning-input
                        type="search"
                        onchange={handleKeyChange}
                        label="Search"
                        value={contactName}
                    ></lightning-input>
                </lightning-layout-item>
                <lightning-layout-item class="slds-p-left_xx-small">
                    <lightning-button
                        label="Search"
                        onclick={handleSearch}
                    ></lightning-button>
                </lightning-layout-item>
            </lightning-layout>
            <template if:true={contacts}>
                <template for:each={contacts} for:item="contact">
                    <p key={contact.Id}>{contact.Name}</p>
                </template>
            </template>
        </div>
    </lightning-card>
</template>

Answer 1

I think that the results are stored under the data property, so it would be contacts.data instead of just contacts in your iteration:

<template for:each={contacts.data} for:item="contact">
    <p key={contact.Id}>{contact.Name}</p>
</template>

More about this here.

Answer 2

If a property is decorated with @wire, the results are returned to the property’s data property

Since contacts is a property or function, you should probably assign it to a variable within the context of your class, and fetch the property's data as such:

@wire(getContactsByName, {searchKey: '$searchKey'})
    loadContacts(result){
        this.contacts = result;
    };

you wil have to update your template to actualy fetch the properties data:

<template for:each={contacts.data} for:item="contact">