Skip to main content

How to Fetch Salesforce Records in LWC Using getRecord (Step-by-Step)

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.

In plain words: The 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.

Common Pitfall: Always pass dynamic properties in wire adapters with a string dollar prefix (e.g., '$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.

Real-World Code Implementation: Here is a complete JavaScript example querying the 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);
        }
    }
}
360 Summary Card: getRecord Benefits
  • 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.