How to Use the getRecord Method in Salesforce LWC

The Lightning Web Components (LWC) framework provides powerful tools to streamline Salesforce development. One of the most useful features is the getRecord method, which allows you to retrieve record data efficiently. In this article, we’ll explore how to use getRecord with practical examples, from basic implementations to advanced use cases.

What is getRecord?

The getRecord method is part of Lightning Web Components’ wire service. It fetches record data from Salesforce and automatically handles reactivity, ensuring your UI stays up-to-date. Unlike Apex calls, getRecord leverages Salesforce’s Lightning Data Service (LDS), which provides built-in caching, security, and performance optimizations.

Key Features of getRecord:

• Automatic Reactivity: Data refreshes when the record changes.
• Field-Level Security (FLS): Respects Salesforce field permissions.
• Caching: Reduces server calls by caching frequently accessed data.

Prerequisites:

• Basic knowledge of HTML, JavaScript, and Salesforce LWC
• A Salesforce org with permission to create LWCs.

Example 1: Basic Usage – Fetching Record Data

Let’s start with a simple example: Displaying a Contact’s name and email.

Step 1: Import Dependencies

import { LightningElement, wire, api } from 'lwc'; // Core LWC modules
import { getRecord } from 'lightning/uiRecordApi'; // Method to fetch records
import NAME_FIELD from '@salesforce/schema/Contact.Name'; // Schema for Contact.Name
import EMAIL_FIELD from '@salesforce/schema/Contact.Email'; // Schema for Contact.Email

Explanation:

• LightningElement: Base class for all LWCs.
• @wire: Decorator to read Salesforce data reactively.
• @api: Decorator to expose public properties (e.g., recordId).
• getRecord: The wire adapter method to fetch records.
• NAME_FIELD and EMAIL_FIELD: Schema imports for fields. Using schema ensures field names are validated at compile time.

Step 2: Define Fields and Wire the Method

export default class ContactViewer extends LightningElement {

@api recordId; // Auto-populated if the component is on a record page

// Wire the getRecord method to the contact property
@wire(getRecord, {
recordId: '$recordId', // Reactive reference to the recordId
fields: [NAME_FIELD, EMAIL_FIELD] // Fields to fetch
})
contact; // Property to hold the result (data or error)
}

Explanation:

• @api recordId: Public property that automatically receives the record ID when the component is placed on a record page. For example, if this component is added to a Contact record page, recordId will be the Contact’s ID.
• @wire(getRecord, { … }): Configures the wire service to call getRecord with parameters:
  -> recordId: ‘$recordId’: The $ prefix makes recordId reactive. If recordId changes, the wire method re-executes
  -> fields: Array of fields to retrieve. Always use schema imports to avoid typos.
• Contact: The property where the result is stored. The wire service returns an object with data and error properties.

Step 3: Display Data in the Template

<template>
<!-- Check if data is available -->
<template if:true={contact.data}>
<p>Name: {contact.data.fields.Name.value}</p>
<p>Email: {contact.data.fields.Email.value}</p>
</template>

<!-- Show error message if data fetch fails -->
<template if:true={contact.error}>
<p>Error loading data!</p>
</template>
</template>

Example 2: Fetching Related Object Data

To display fields from a related object (e.g., the Account linked to a Contact), use relationship paths.

Step 1: Import the Related Field

import ACCOUNT_NAME_FIELD from '@salesforce/schema/Contact.Account.Name';

Explanation:

Contact.Account.Name: Traverses the relationship from Contact to Account using dot notation. This requires the AccountId field to be populated on the Contact. 

Step 2: Wire the Method

export default class ContactWithAccount extends LightningElement {
@api recordId;

@wire(getRecord, {
recordId: '$recordId',
fields: [NAME_FIELD, ACCOUNT_NAME_FIELD] // Include the related field
})
contact;
}

Explanation:

fields: [NAME_FIELD, ACCOUNT_NAME_FIELD]: Fetches the Contact’s Name and the related Account’s Name.

Step 3: Access Nested Data in the Template

<template>
<template if:true={contact.data}>
<p>Contact: {contact.data.fields.Name.value}</p>
<!-- Traverse the Account relationship -->
<p>Account: {contact.data.fields.Account.value.fields.Name.value}</p>
</template>
</template>

Explanation:

• contact.data.fields.Account.value: Returns the linked Account record.
• .fields.Name.value: Accesses the Account’s Name field. Always check for null values in real-world scenarios.

Example 3: Working with Custom Fields

Custom fields are referenced using their API names, including the namespace if applicable.

Step 1: Import the Custom Field

import CUSTOM_FIELD from '@salesforce/schema/Contact.My_Custom_Field__c';

Note:

• Replace My_Custom_Field__c with your field’s API name.
• If the field is part of a managed package, use the namespace (e.g., Namespace__MyField__c).

Step 2: Fetch the Custom Field

@wire(getRecord, {
recordId: '$recordId',
fields: [CUSTOM_FIELD]
})
contact;

Step 3: Display the Value

<template>
<template if:true={contact.data}>
<p>Custom Field: {contact.data.fields.My_Custom_Field__c.value}</p>
</template>
</template>

Example 4: Error Handling and Loading States

Improve user experience by handling errors and loading states.

Step 1: Use a Wired Function

export default class ContactWithErrorHandling extends LightningElement {
@api recordId;
contactData; // Stores the resolved data
error; // Stores errors

@wire(getRecord, {
recordId: '$recordId',
fields: [NAME_FIELD]
})
wiredContact({ data, error }) { // Destructure the result
if (data) {
this.contactData = data;
this.error = undefined; // Clear previous errors
} else if (error) {
this.error = error;
this.contactData = undefined; // Clear previous data
}
}
}

Explanation:

• wiredContact({ data, error }): The wire method can assign the result to a function instead of a property. This allows custom logic for data/error handling.
• Destructuring { data, error } extracts these properties from the wire result.

Step 2: Enhance the Template

<template>
<!-- Display data -->
<template if:true={contactData}>
<p>Name: {contactData.fields.Name.value}</p>
</template>

<!-- Show error message -->
<template if:true={error}>
<p class="error">Error: {error.body.message}</p>
</template>

<!-- Show loading spinner -->
<template if:true={!contactData && !error}>
<lightning-spinner variant="brand"></lightning-spinner>
</template>
</template>

Explanation:

• if:true={!contactData && !error}: Shows a loading spinner while data is being fetched.
• error.body.message: Displays the error message from Salesforce.

Are you preparing for the Salesforce AI Certifications? Check out the Salesforce certification practice set here

Best Practices

 1. Minimize Field Requests

• Only request the fields you need. For example:

fields: [NAME_FIELD, EMAIL_FIELD] // Good
fields: ['Name', 'Email'] // Avoid (no schema validation)

2. Secure Data

• getRecord respects FLS. Users without access to a field will see undefined for its value.

3. Leverage Caching

• LDS caches data for the session. Repeated requests for the same record don’t trigger server calls.

FAQs

1. How to use getRecord in LWC?

Conclusion

The getRecord method simplifies record data retrieval in LWCs while ensuring performance and security. By understanding each code block from schema imports to error handling you can build robust components that dynamically respond to data changes. Experiment with the examples above and explore the official Salesforce documentation for advanced use cases like updating records or combining getRecord with other wire adapters.

Get a complete Roadmap To Learn Salesforce Admin And Development

Name *

First

Last

Email *

Comment or Message

Submit