Lightning web components(LWC) use a reactive wire service, which is built on Lightning Data Service. Components use @wire in their JavaScript class to read data from one of the wire adapters in the lightning/ui*Api modules and also to call the apex controller server-side methods using wire services.
Reactive wire service in LWC supports reactive variables, which are prefixed with $. If a reactive variable changes, the wire service provisions(requests) new data.
Wire Service in LWC syntax
import { adapterId } from 'adapterModule'; @wire(adapterId, adapterConfig) propertyOrFunction;
- adapterId (Identifier)—The identifier of the wire adapter.
- adapterModule (String)—The identifier of the module that contains the wire adapter function, in the format namespace/moduleName. Look at the format! To import a module in JavaScript, use lightning/ui*Api instead of lightning-ui-*-api.
- adapterConfig (Object)—A configuration object specific to the wire adapter. Configuration object property values can be either strings or references to objects and fields imported from @salesforce/schema. Properties in the adapterConfig object can’t be undefined. If a property is undefined, the wire service doesn’t provision data. Don’t update a wire adapter configuration object property in renderedCallback() as it can result in an infinite loop.
@wire can be used as:
- To a property
- As a function
Wire a property : Here, the wire service either provides you with the list of account to the wiredAccounts.data property, or returns an error to the wiredAccounts.error property.
//below code will wire list of Account data
@wire(getAccounts) wiredAccounts;
Wire a function :
Wire a function if you want to operate on the returned data. If a function is decorated with @wire, the results are returned in an object with a data property or an error property.
@track lstaccounts; @track error; //below code will be used as a function @wire(getAccounts) wiredAccounts ({ error, data }) { if (data) { this.lstaccounts = data; } else if (error) { this.error = error; } }
Import references to salesforce Object and fields
1. To import a reference to an object, use this syntax.
import objectName from '@salesforce/schema/object';
Example:-
import PROPERTY_OBJECT from '@salesforce/schema/Property__c'; import ACCOUNT_OBJECT from '@salesforce/schema/Account';
2. To import a reference to a field, use this syntax.
import FIELD_NAME from '@salesforce/schema/object.field';
Example:-
import POSITION_LEVEL_FIELD from '@salesforce/schema/Property__c.Name'; import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
3. To import a reference to a field via a relationship, use this syntax.
import SPANNING_FIELD_NAME from '@salesforce/schema/object.relationship.field';
Example:-
import ACCOUNT_OWNER_NAME_FIELD from '@salesforce/schema/Account.Owner.Name';
Decorate a Property with @wire
- Wiring a property with @wire is useful when you want to consume the data or error.
- If the property decorated with @wire is used as an attribute in the template and its value changes,
- the wire service provisions(requests) the data and triggers the component to rerender.
Example:-
import { LightningElement, api, wire } from 'lwc'; import { getRecord } from 'lightning/uiRecordApi'; export default class Record extends LightningElement { @api recordId; @wire(getRecord, { recordId: '$recordId', fields: ['Opportunity.Name'] }) record; }
Decorate a Function with @wire
- Wiring a function is useful to perform logic whenever new data is provided or when an error occurs.
- The function is invoked whenever a value is available, which can be before or after the component is connected or rendered.
Example:-
import { LightningElement, api, track, wire } from 'lwc'; import { getRecord } from 'lightning/uiRecordApi';
export default class WireFunction extends LightningElement { @api recordId; @track record; @track error; @wire(getRecord, { recordId: '$recordId', fields: ['Opportunity.Name'] }) wiredAccount({ error, data }) { if (data) { this.record = data; } else if (error) { this.error = error; } } }
Practical Example
This component wires an Apex method call to a function. Because the results are coming to a function, the JavaScript can work on the results.
contactExp.apxc
public with sharing class ContactExp { @AuraEnabled(cacheable=true) public static List<contact> getContactList() { List<contact> conList= [SELECT Id, Name, Title, Phone, Email FROM Contact LIMIT 10]; return conList; } }
contactshow.html
<template> <lightning-card title=”Decorate a Function with @wire” icon-name=”custom:custom63″> <div class=”slds-m-around_medium”> <template if:true={contacts}> <template for:each={contacts} for:item=”contact”> <p key={contact.Id}>{contact.Name}</p> </template> </template> <template if:true={error}> <c-error-Exp errors={error}></c-error-Exp> </template> </div> </lightning-card> </template>
contactshow.js
import { LightningElement, wire } from ‘lwc’; import getContactList from ‘@salesforce/apex/ContactExp.getContactList’; export default class contactDisplay extends LightningElement { contacts; error; @wire(getContactList) wiredContacts({ error, data }) { if (data) { console.log(‘data: ‘, data); this.contacts = data; console.log(‘this.contacts: ‘, this.contacts); this.error = undefined; | console.log(‘this.error: ‘, this.error); } else if (error) { console.log(‘error ‘, error); this.error = error; console.log(‘this.error: ‘, this.error); this.contacts = undefined; console.log(‘this.contacts : ‘, this.contacts); } }}
errorExp.html
<template> <template if:true={errors}> status: {errors.status}<br /> statusText: {errors.statusText}<br /> <template for:each={errors.body} for:item=”error”> statusText: {error.message} </template> </template> </template>
errorExp.js
Output: