Explain @wire decorator in Lightning Web Component in detail?

 The Lightning Web Components programming model has three decorators that add functionality to a property or function. 

In this blog we will learn the use of "@wire decorator in Lightning Web Component".

1) @wire is used to read Salesforce data.

2) It is reactive i.e when it provisions the data the components rerender.

3) It is use to call an apex method.

We have to use default import syntax to import an Apex method as shown below in  Javascript Controller.

Syntax:

import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodReference';


apexMethodName—This identifies the Apex method.

apexMethodReference—The name of the Apex method to import.

Classname—The name of the Apex class.

Namespace—If the class is in the same namespace as the component, don’t specify a namespace. If the class is in a managed package, We have to specify the namespace of the managed package.

To call an Apex method, a Lightning web component can do the following:

1) Wire a property
2) Wire a function
3) Call a method imperatively


Wire an Apex Method to a Property:


import apexMethod from '@salesforce/apex/Namespace.Classname.apexMethod';
@wire(apexMethod, { apexMethodParams })
propertyOrFunction;


apexMethodParams—An object with parameters for the apexMethod, if needed.

propertyOrFunction—A private property or function that receives the stream of data from the wire service. If a property is decorated with @wire, the results are returned to the property’s data property or error property. If a function is decorated with @wire, the results are returned in an object with a data property or an error property.


wireExample.html

<template>
    <div >
        <p>Displaying Contact Data</p>
        <template if:true={contacts.data}>
            <template for:each={contacts.data} for:item="contact">
                <p key={contact.Id}>{contact.Name}</p>
            </template>
        </template>
        <template if:true={contacts.error}>
           
        </template>
    </div>

</template>

wireExample.js

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

export default class wireExample extends LightningElement {
    @wire(getContactList) contacts;

}

FetchContact.cls

public with sharing class FetchContact {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactList() {
        return [
            SELECT Id, Name
            FROM Contact
            LIMIT 5
        ];
    }
}

wireTestingApp.app

<aura:application>
<c:wireExample></c:wireExample>
</aura:application> 

Output:

Wire an Apex Method to a Function:

wireaFunctionExample.html

<template>

    <div >

        <p>Displaying Account Information</p>

        <template if:true={accountRecord}>

            <template for:each={accountRecord} for:item="item" for:index="index">

                <p key={item.Id}>

                   Name: {item.Name}

                   <br/>

                    Industry: {item.Industry}

                </p>

            </template>

        </template>

        <template if:true={error}>

            Some error occured.

        </template>

    </div>

 

</template>

wireaFunctionExample.js

import { LightningElement,wire,track,api } from 'lwc';

import getAccountData from '@salesforce/apex/getAccountRecord.getAccountRecordMethod';

 

export default class WireaFunctionExample extends LightningElement {

    @api recordId;

    @track accountRecord;

    @track error;

 

 

    @wire(getAccountData,{ recordIdAccount: '$recordId'}) 

    accountsData({ error, data }) {

        if (data) {

            //console.log('RecordId is'+recordId);

            this.accountRecord = data;

            this.error = undefined;

        } else if (error) {

            //console.log('Error block');

            this.error = error;

            this.accountRecord = undefined;

        }

    }

}

wireaFunctionExample.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>50.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

    </targets>

</LightningComponentBundle>

getAccountRecord.cls

public with sharing class getAccountRecord {

  

    @AuraEnabled(cacheable=true)

    public static List<Account> getAccountRecordMethod(String recordIdAccount) {

    List<Account> accList=[SELECT Id, Name, Industry

        FROM Account

        Where id=:recordIdAccount];

        return accList;

    }

}

OUTPUT: