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