Discover The Essential 10 Lightning Web Components LWC Wire Adapters In Salesforce That You Should Be Familiar With

An approach enabling components to interact with the Salesforce platform involves linking properties or invoking Apex methods. This process is facilitated by wire adapters, pivotal in efficiently retrieving and manipulating data. This article will explore the functionalities and applications of the top 10 frequently utilized LWC wire adapters.

1. @wire(getRecord)

This wire adapter proves highly beneficial when you require the presentation or manipulation of data from a particular record. It streamlines the process of data retrieval and guarantees that your component consistently possesses the latest information.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { LightningElement, wire, api } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
export default class RecordDetails extends LightningElement {
@api recordId;
/* @wire(getRecord, { recordId: string, fields: string|string[], optionalFields?: string|string[] })
propertyOrFunction
@wire(getRecord, { recordId: string, layoutTypes: string|string[],
modes?: string|string[], optionalFields?: string|string[] })
propertyOrFunction
*/
@wire(getRecord, { recordId: '$recordId', fields: ['Account.Name', 'Account.Type'] })
account;
}
import { LightningElement, wire, api } from 'lwc'; import { getRecord } from 'lightning/uiRecordApi'; export default class RecordDetails extends LightningElement { @api recordId; /* @wire(getRecord, { recordId: string, fields: string|string[], optionalFields?: string|string[] }) propertyOrFunction @wire(getRecord, { recordId: string, layoutTypes: string|string[], modes?: string|string[], optionalFields?: string|string[] }) propertyOrFunction */ @wire(getRecord, { recordId: '$recordId', fields: ['Account.Name', 'Account.Type'] }) account; }
import { LightningElement, wire, api } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

export default class RecordDetails extends LightningElement {
    @api recordId;
     /* @wire(getRecord, { recordId: string, fields: string|string[], optionalFields?: string|string[] })
         propertyOrFunction

        @wire(getRecord, { recordId: string, layoutTypes: string|string[],
                    modes?: string|string[], optionalFields?: string|string[] })
         propertyOrFunction
    */
    @wire(getRecord, { recordId: '$recordId', fields: ['Account.Name', 'Account.Type'] })
    account;
}

2. @wire(getRecords)

Use this wire adapter to get data for a batch of records at once. You can request multiple objects or different record types.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { LightningElement, wire } from 'lwc';
import { getRecords } from 'lightning/uiRecordApi';
@wire(getRecords, { records: [ { recordIds: string[], fields: string[] } ] })
propertyOrFunction
@wire(getRecords, { records: [ { recordIds: string[], fields: string[], optionalFields?: string[] } ] })
propertyOrFunction
import { LightningElement, wire } from 'lwc'; import { getRecords } from 'lightning/uiRecordApi'; @wire(getRecords, { records: [ { recordIds: string[], fields: string[] } ] }) propertyOrFunction @wire(getRecords, { records: [ { recordIds: string[], fields: string[], optionalFields?: string[] } ] }) propertyOrFunction
import { LightningElement, wire } from 'lwc';
import { getRecords } from 'lightning/uiRecordApi';

@wire(getRecords, { records: [ { recordIds: string[], fields: string[] } ] })
propertyOrFunction

@wire(getRecords, { records: [ { recordIds: string[], fields: string[], optionalFields?: string[] } ] })
propertyOrFunction

3. @wire(getFieldValue)

Retrieves the value of a field from a record, with the capability to span fields. The field’s value is provided in its raw data format, which, in certain cases, may differ from the display value returned by getFieldDisplayValue(record, field).

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { LightningElement, api, wire } from "lwc";
import { getRecord, getFieldValue } from "lightning/uiRecordApi";
import REVENUE_FIELD from "@salesforce/schema/Account.AnnualRevenue";
import CREATED_FIELD from "@salesforce/schema/Account.CreatedDate";
import EXP_FIELD from "@salesforce/schema/Account.SLAExpirationDate__c";
const fields = [REVENUE_FIELD, CREATED_FIELD, EXP_FIELD];
export default class WireGetValue extends LightningElement {
@api recordId;
@wire(getRecord, { recordId: "$recordId", fields })
account;
get revenue() {
return getFieldValue(this.account.data, REVENUE_FIELD);
}
get created() {
return getFieldValue(this.account.data, CREATED_FIELD);
}
get expiration() {
return getFieldValue(this.account.data, EXP_FIELD);
}
}
import { LightningElement, api, wire } from "lwc"; import { getRecord, getFieldValue } from "lightning/uiRecordApi"; import REVENUE_FIELD from "@salesforce/schema/Account.AnnualRevenue"; import CREATED_FIELD from "@salesforce/schema/Account.CreatedDate"; import EXP_FIELD from "@salesforce/schema/Account.SLAExpirationDate__c"; const fields = [REVENUE_FIELD, CREATED_FIELD, EXP_FIELD]; export default class WireGetValue extends LightningElement { @api recordId; @wire(getRecord, { recordId: "$recordId", fields }) account; get revenue() { return getFieldValue(this.account.data, REVENUE_FIELD); } get created() { return getFieldValue(this.account.data, CREATED_FIELD); } get expiration() { return getFieldValue(this.account.data, EXP_FIELD); } }
import { LightningElement, api, wire } from "lwc";
import { getRecord, getFieldValue } from "lightning/uiRecordApi";

import REVENUE_FIELD from "@salesforce/schema/Account.AnnualRevenue";
import CREATED_FIELD from "@salesforce/schema/Account.CreatedDate";
import EXP_FIELD from "@salesforce/schema/Account.SLAExpirationDate__c";

const fields = [REVENUE_FIELD, CREATED_FIELD, EXP_FIELD];

export default class WireGetValue extends LightningElement {
  @api recordId;

  @wire(getRecord, { recordId: "$recordId", fields })
  account;

  get revenue() {
    return getFieldValue(this.account.data, REVENUE_FIELD);
  }

  get created() {
    return getFieldValue(this.account.data, CREATED_FIELD);
  }

  get expiration() {
    return getFieldValue(this.account.data, EXP_FIELD);
  }
}

4. @wire(getListInfoByName)

Use this wire adapter to get the metadata for a list view.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { LightningElement, wire } from "lwc";
import { getListInfoByName } from "lightning/uiListsApi";
import ACCOUNT_OBJECT from "@salesforce/schema/Account";
export default class Example extends LightningElement {
@wire(getListInfoByName, { objectApiName: ACCOUNT_OBJECT, listViewApiName: "AllAccounts" })
propertyOrFunction;
}
import { LightningElement, wire } from "lwc"; import { getListInfoByName } from "lightning/uiListsApi"; import ACCOUNT_OBJECT from "@salesforce/schema/Account"; export default class Example extends LightningElement { @wire(getListInfoByName, { objectApiName: ACCOUNT_OBJECT, listViewApiName: "AllAccounts" }) propertyOrFunction; }
import { LightningElement, wire } from "lwc";
import { getListInfoByName } from "lightning/uiListsApi";
import ACCOUNT_OBJECT from "@salesforce/schema/Account";

export default class Example extends LightningElement {
  @wire(getListInfoByName, { objectApiName: ACCOUNT_OBJECT, listViewApiName: "AllAccounts" })
  propertyOrFunction;
}

getListInfosByName : Use this wire adapter to get the metadata for a batch of list views.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { getListInfosByName } from "lightning/uiListsApi";
import ACCOUNT_OBJECT from "@salesforce/schema/Account";
export default class KeywordResults extends LightningElement {
@wire(getListInfosByName, {
names: ["${ACCOUNT_OBJECT.objectApiName}.AllAccounts"],
})
getListInfosByNameWire({ data }) {
if (data && data.results) {
this.listInfos = data.results.map(({ result }) => result);
}
}
}
import { getListInfosByName } from "lightning/uiListsApi"; import ACCOUNT_OBJECT from "@salesforce/schema/Account"; export default class KeywordResults extends LightningElement { @wire(getListInfosByName, { names: ["${ACCOUNT_OBJECT.objectApiName}.AllAccounts"], }) getListInfosByNameWire({ data }) { if (data && data.results) { this.listInfos = data.results.map(({ result }) => result); } } }
import { getListInfosByName } from "lightning/uiListsApi";
import ACCOUNT_OBJECT from "@salesforce/schema/Account";

export default class KeywordResults extends LightningElement {
  @wire(getListInfosByName, {
    names: ["${ACCOUNT_OBJECT.objectApiName}.AllAccounts"],
  })
  getListInfosByNameWire({ data }) {
    if (data && data.results) {
      this.listInfos = data.results.map(({ result }) => result);
    }
  }
}

5. @wire(getPicklistValues):

It proves to be a potent tool when constructing dynamic forms or components that necessitate information regarding the available picklist options.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { LightningElement, wire, api } from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
export default class PicklistOptions extends LightningElement {
@api objectApiName;
@api fieldApiName;
@wire(getPicklistValues, { recordTypeId: '$recordTypeId', fieldApiName: '$fieldApiName' })
picklistValues;
}
import { LightningElement, wire, api } from 'lwc'; import { getPicklistValues } from 'lightning/uiObjectInfoApi'; export default class PicklistOptions extends LightningElement { @api objectApiName; @api fieldApiName; @wire(getPicklistValues, { recordTypeId: '$recordTypeId', fieldApiName: '$fieldApiName' }) picklistValues; }
import { LightningElement, wire, api } from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';

export default class PicklistOptions extends LightningElement {
    @api objectApiName;
    @api fieldApiName;

    @wire(getPicklistValues, { recordTypeId: '$recordTypeId', fieldApiName: '$fieldApiName' })
    picklistValues;
}

6. @wire(getObjectInfo):

This is useful when you need to dynamically generate forms or validate input based on the properties of an object.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { LightningElement, wire, api } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
export default class ObjectDetails extends LightningElement {
@api objectApiName;
@wire(getObjectInfo, { objectApiName: '$objectApiName' })
objectInfo;
}
import { LightningElement, wire, api } from 'lwc'; import { getObjectInfo } from 'lightning/uiObjectInfoApi'; export default class ObjectDetails extends LightningElement { @api objectApiName; @wire(getObjectInfo, { objectApiName: '$objectApiName' }) objectInfo; }
import { LightningElement, wire, api } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';

export default class ObjectDetails extends LightningElement {
    @api objectApiName;

    @wire(getObjectInfo, { objectApiName: '$objectApiName' })
    objectInfo;
}

7. @wire(notifyRecordUpdateAvailable(recordIds))

The getRecordNotifyChange(recordIds) function fetches updates for the specified record IDs and refreshes the Lightning Data Service cache, ensuring that your wire adapters receive the latest record information. However, it’s crucial to be aware that employing getRecordNotifyChange(recordIds) with multiple adapters returning data of the same type is not advisable.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { LightningElement, wire } from 'lwc';
import { getRecord, notifyRecordUpdateAvailable } from 'lightning/uiRecordApi';
import apexUpdateRecord from '@salesforce/apex/Controller.apexUpdateRecord';
export default class Example extends LightningElement {
@api recordId;
// Wire a record
@wire(getRecord, { recordId: '$recordId', fields: ... })
record;
async handler() {
// Do something before the record is updated
showSpinner();
// Update the record via Apex
await apexUpdateRecord(this.recordId);
// Notify LDS that you've changed the record outside its mechanisms
// Await the Promise object returned by notifyRecordUpdateAvailable()
await notifyRecordUpdateAvailable([{recordId: this.recordId}]);
hideSpinner();
}
}
import { LightningElement, wire } from 'lwc'; import { getRecord, notifyRecordUpdateAvailable } from 'lightning/uiRecordApi'; import apexUpdateRecord from '@salesforce/apex/Controller.apexUpdateRecord'; export default class Example extends LightningElement { @api recordId; // Wire a record @wire(getRecord, { recordId: '$recordId', fields: ... }) record; async handler() { // Do something before the record is updated showSpinner(); // Update the record via Apex await apexUpdateRecord(this.recordId); // Notify LDS that you've changed the record outside its mechanisms // Await the Promise object returned by notifyRecordUpdateAvailable() await notifyRecordUpdateAvailable([{recordId: this.recordId}]); hideSpinner(); } }
import { LightningElement, wire } from 'lwc';
import { getRecord, notifyRecordUpdateAvailable } from 'lightning/uiRecordApi';
import apexUpdateRecord from '@salesforce/apex/Controller.apexUpdateRecord';

export default class Example extends LightningElement {
  @api recordId;

  // Wire a record
  @wire(getRecord, { recordId: '$recordId', fields: ... })
  record;

  async handler() {
    // Do something before the record is updated
    showSpinner();

    // Update the record via Apex
    await apexUpdateRecord(this.recordId);

    // Notify LDS that you've changed the record outside its mechanisms
    // Await the Promise object returned by notifyRecordUpdateAvailable()
    await notifyRecordUpdateAvailable([{recordId: this.recordId}]);
    hideSpinner();
  }
}

8. @wire(getObjectInfos)

However, it enables the retrieval of information for multiple objects in a single wire request. This proves beneficial when handling components that necessitate data from various objects.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { LightningElement, wire, api } from 'lwc';
import { getObjectInfos } from 'lightning/uiObjectInfoApi';
export default class MultiObjectDetails extends LightningElement {
@api objectApiNames;
@wire(getObjectInfos, { objectApiNames: '$objectApiNames' })
objectInfos;
}
import { LightningElement, wire, api } from 'lwc'; import { getObjectInfos } from 'lightning/uiObjectInfoApi'; export default class MultiObjectDetails extends LightningElement { @api objectApiNames; @wire(getObjectInfos, { objectApiNames: '$objectApiNames' }) objectInfos; }
import { LightningElement, wire, api } from 'lwc';
import { getObjectInfos } from 'lightning/uiObjectInfoApi';

export default class MultiObjectDetails extends LightningElement {
    @api objectApiNames;

    @wire(getObjectInfos, { objectApiNames: '$objectApiNames' })
    objectInfos;
}

9. @wire(getNavItems)

The (Beta) adapter enables the retrieval of navigation items, including the app’s navigation menu. This is advantageous when you aim to craft a customized navigation experience within your Lightning components.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { LightningElement, wire } from 'lwc';
import { getNavItems } from 'lightning/uiAppsApi';
import FORM_FACTOR from '@salesforce/client/formFactor';
export default class Example extends LightningElement {
@api tabs = ['standard-Account', 'standard-CollaborationGroup'];
@wire(getNavItems, {
formFactor: FORM_FACTOR,
navItemNames: '$tabs',
pageSize: 30,
})
propertyOrFunction;
import { LightningElement, wire } from 'lwc'; import { getNavItems } from 'lightning/uiAppsApi'; import FORM_FACTOR from '@salesforce/client/formFactor'; export default class Example extends LightningElement { @api tabs = ['standard-Account', 'standard-CollaborationGroup']; @wire(getNavItems, { formFactor: FORM_FACTOR, navItemNames: '$tabs', pageSize: 30, }) propertyOrFunction;
import { LightningElement, wire } from 'lwc';
import { getNavItems } from 'lightning/uiAppsApi';
import FORM_FACTOR from '@salesforce/client/formFactor';

export default class Example extends LightningElement {
  @api tabs = ['standard-Account', 'standard-CollaborationGroup'];
  @wire(getNavItems, {
    formFactor: FORM_FACTOR,
    navItemNames: '$tabs',
    pageSize: 30,
  })
  propertyOrFunction;

10. @wire(getRelatedListRecords)

Employ this wire adapter to obtain RelatedList records. Related lists showcase details and links to records associated with a specific record. For instance, an account may feature related lists for contacts, cases, notes, or even files.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { LightningElement, wire } from 'lwc';
import { getRelatedListRecords } from 'lightning/uiRelatedListApi';
export default class LdsGetRelatedListRecords extends LightningElement {
@wire(getRelatedListRecords, {
parentRecordId: '001RM000003UNu6YAG',
relatedListId: 'Contacts',
fields: ['Contact.Name','Contact.Id'],
sortBy: ['Contact.Name']
})
}
import { LightningElement, wire } from 'lwc'; import { getRelatedListRecords } from 'lightning/uiRelatedListApi'; export default class LdsGetRelatedListRecords extends LightningElement { @wire(getRelatedListRecords, { parentRecordId: '001RM000003UNu6YAG', relatedListId: 'Contacts', fields: ['Contact.Name','Contact.Id'], sortBy: ['Contact.Name'] }) }
import { LightningElement, wire } from 'lwc';
import { getRelatedListRecords } from 'lightning/uiRelatedListApi';

export default class LdsGetRelatedListRecords extends LightningElement {
  @wire(getRelatedListRecords, {
    parentRecordId: '001RM000003UNu6YAG',
    relatedListId: 'Contacts',
    fields: ['Contact.Name','Contact.Id'],
    sortBy: ['Contact.Name']
  })
}

Utilize the wire adapter getRelatedListRecordBatch to retrieve records for a batch of RelatedLists.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { LightningElement, wire } from 'lwc';
import { getRelatedListRecordsBatch } from 'lightning/uiRelatedListApi';
export default class LdsGetRelatedListRecordsBatch extends LightningElement {
@wire(getRelatedListRecordsBatch, {
parentRecordId: '001RM000003UNu6YAG',
relatedListParameters: [
{
relatedListId: 'Contacts',
fields: ['Contact.Name','Contact.Id'],
sortBy: ['Contact.Name']
},
{
relatedListId: 'Opportunities',
fields: ['Opportunity.Name', 'Opportunity.Amount'],
sortBy: ['Opportunity.Amount'],
where: "{ and: [{ Name: { like: \"ACME%\" }}] }"
}
]
})
}
import { LightningElement, wire } from 'lwc'; import { getRelatedListRecordsBatch } from 'lightning/uiRelatedListApi'; export default class LdsGetRelatedListRecordsBatch extends LightningElement { @wire(getRelatedListRecordsBatch, { parentRecordId: '001RM000003UNu6YAG', relatedListParameters: [ { relatedListId: 'Contacts', fields: ['Contact.Name','Contact.Id'], sortBy: ['Contact.Name'] }, { relatedListId: 'Opportunities', fields: ['Opportunity.Name', 'Opportunity.Amount'], sortBy: ['Opportunity.Amount'], where: "{ and: [{ Name: { like: \"ACME%\" }}] }" } ] }) }
import { LightningElement, wire } from 'lwc';
import { getRelatedListRecordsBatch } from 'lightning/uiRelatedListApi';

export default class LdsGetRelatedListRecordsBatch extends LightningElement {
  @wire(getRelatedListRecordsBatch, {
    parentRecordId: '001RM000003UNu6YAG',
    relatedListParameters: [
      {
        relatedListId: 'Contacts',
        fields: ['Contact.Name','Contact.Id'],
        sortBy: ['Contact.Name']
      },
      {
        relatedListId: 'Opportunities',
        fields: ['Opportunity.Name', 'Opportunity.Amount'],
        sortBy: ['Opportunity.Amount'],
        where: "{ and: [{ Name: { like: \"ACME%\" }}] }"
      }
    ]
  })
}

Closing Thoughts

Lightning Web Components wire adapters serve as potent tools, streamlining data retrieval and manipulation within the Salesforce environment. A grasp of the functionalities of these frequently employed wire adapters empowers developers to construct more efficient, dynamic, and responsive user interfaces on the Salesforce platform.