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

/ apex, Salesforce / By

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Related Posts