Wire an apex method to a property in Lightning Web Component

Hi,

We can invoke the apex method with @wire or imperatively.

When we invoke an apex method with @wire then we can do in two ways for retrieving the results :

1)Wire a method to a property
2)Wire a method to a function

Here we are going to learn about "wire a method to a property".

Syntax:
@wire(<apexMethod_identifier>) <property>;

Eg:
@wire(getContactList) contacts;

Here: getContactList is an identifier for an apex method which is imported through import statement.

Let's take a small example here that displays a list of records from the Contact object.

When we want to invoke a method through wire service then it should be annotated with "@AuraEnabled(cacheable=true)".

Apex Class:

public with sharing class ContactController {
   @AuraEnabled(cacheable=true)
    public static List<Contact> getContactRecords() {
        return [
            SELECT Id, FirstName,LastName, Title, Phone, Email
            FROM Contact         
            LIMIT 10
        ];
    }
}

Now let's write LWC(Lightning Web Component):

wireApexMethodtoPropery.html:

<template>
    <lightning-card title="Contact Records">
            <template for:each={contacts.data} for:item="contactObj" for:index="contIndex">
                <p key={contactObj.Id} class="slds-p-horizontal_small">
                    {contactObj.FirstName} {contactObj.LastName}
                </p>
            </template>
    </lightning-card>
</template>

wireApexMethodtoPropery.js:

import { LightningElement,wire } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactRecords';
export default class DisplayContacts extends LightningElement {
    @wire(getContactList) contacts;

}

Here getContactList is an identifier to apex method "getContactRecords" which is imported.
When we "wire" a method to the property "contacts" then wire provisions the result to the property's "contacts" properties "data" and "error".
So when we have to access this result to HTML file in our component then we have to use "contacts.data" as above in the HTML file.

wireApexMethodtoPropery.js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>

</LightningComponentBundle>

Here we are configuring this component for App Page in App Builder with the help of target "lightning__AppPage"

Output:

Reference:
https://www.youtube.com/watch?v=G7oJDD6RMWU&list=PL-JzyFWuCbkKcFSOCRlCUk79YbET5QvZC
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/apex