Wire an Apex Method to a Function 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 function".
This helps to add or change or compare something in the result before display on the "HTML" file.

Syntax:
 @wire(<apex_method_identifier>) <Function>({error,data}){
        if(data){
            //block of code
        }
        else if(error){
           //block of code
        }

    }

The wire service provisions the results to the Function() function via an object with either an error or data property.
Eg:
 @wire(getContactList) retrieveContacts({error,data}){
        if(data){
            this.contacts = data;
            this.errormessage = undefined;
        }
        else if(error){
            this.contacts = undefined;
            this.errormessage = error;
        }

    }

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

retrieveContacts is a function that should have an object with properties {error, data}.
data holds the contact records retrieved via the apex method.

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):
wireapexmethodtoFunction.html:
<template>
    <lightning-card>
        <p class="slds-p-horizontal_small">
            <template for:each={contacts} for:index="index" for:item="contactObj">
                <p key={contactObj.id}>
                    {index} - {contactObj.LastName}
                </p>
            </template>
        </p>
    </lightning-card>

</template>

wireapexmethodtoFunction.js

import { LightningElement,wire } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactRecords';

export default class ApexWireMethodToFunction extends LightningElement {
    contacts;
    errormessage;
    @wire(getContactList) retrieveContacts({error,data}){
        if(data){
            this.contacts = data;
            this.errormessage = undefined;
        }
        else if(error){
            this.contacts = undefined;
            this.errormessage = error;
        }

    }


}

Here in the above file "getContactRecords" is apex method that returns contact records.
"getContactList" is an identifier to apex method
"contacts" is a property
"errormessage" is a property

wireapexmethodtoFunction.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>

Output:

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

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