Fetching data efficiently in Salesforce Lightning Web Components (LWC) doesn't always require custom Apex controllers. By leveraging Lightning Data Service (LDS), you can read record data seamlessly using minimal code while benefiting from automatic caching and real-time updates.
getRecord wire adapter is a built-in Lightning Data Service tool that fetches record details in LWC without writing custom Apex code. It automatically manages caching and updates the component when data changes.
Prerequisites
Before implementing this solution, ensure you have:
- Basic understanding of JavaScript and LWC development.
- Salesforce DX (SFDX) and Visual Studio Code set up with the Salesforce Extension Pack.
- Access to a Salesforce Developer Org or Sandbox.
Step 1: Create a New Lightning Web Component
Use Visual Studio Code or SFDX CLI to generate a new Lightning Web Component named getRecordExample.
Step 2: Import Required Modules
In your component's JavaScript file (getRecordExample.js), import LightningElement and the wire service from lwc, along with getRecord from lightning/uiRecordApi.
import { LightningElement, wire, api } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
Step 3: Define the Record ID Property
To make your component dynamic and reusable, define a recordId property. Expose it using @api so Salesforce automatically passes the current page's record ID when placed on a Record Page.
export default class GetRecordExample extends LightningElement {
@api recordId;
}
Step 4: Wire the getRecord Function
Wire the getRecord method to retrieve specific fields dynamically. Use the prefix '$recordId' to pass the ID reactively so the wire service executes as soon as the ID becomes available.
'$recordId'). Omitting the quotes or dollar sign breaks reactivity and stops data fetching.
Step 5: Handle the Retrieved Record Data
Process the returned object inside the wired function or wire property. Check for both data and error states to handle scenarios cleanly.
Name and Industry fields from an Account record.
import { LightningElement, wire, api } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
const FIELDS = [NAME_FIELD, INDUSTRY_FIELD];
export default class GetRecordExample extends LightningElement {
@api recordId;
accountName;
accountIndustry;
@wire(getRecord, { recordId: '$recordId', fields: FIELDS })
wiredRecord({ error, data }) {
if (data) {
this.accountName = getFieldValue(data, NAME_FIELD);
this.accountIndustry = getFieldValue(data, INDUSTRY_FIELD);
} else if (error) {
console.error('Error loading record:', error);
}
}
}
- No Apex Needed: Reduces server-side code maintenance.
- Built-in Caching: Shares cached data across components for better UI performance.
- Field-Level Security: Automatically enforces Salesforce user access rules and permissions.
Summary
The getRecord wire adapter provides an efficient, secure, and declarative way to read data in Lightning Web Components. By relying on schema imports and getFieldValue helpers, you ensure robust, referentially intact code that handles record processing seamlessly.