Get parent record fields using getRecord uiRecordApi in lwc

Hi Trailblazers! In this post, we will discuss how we can query parent record fields using getRecord method from the uiRecordApi library of Lightning web components.

For this, we are going to use the below methods from the uiRecordApi

• getRecord: method to get the sObject record
• getFieldValue: method to get the field value from the getRecord result.

For this demo, we are going to demonstrate using a Contact record. In this example, we are going to fetch the Account Name, and Account's Parent's name from the Contact record.

First, you need to import these fields from the Salesforce Schema. Like below

import ACCOUNT_NAME from "@salesforce/schema/Contact.Account.Name";
import GRAND_PARENT_ACCOUNT from "@salesforce/schema/Contact.Account.Parent.Name";
import CONTACT_NAME from "@salesforce/schema/Contact.Name";

So in the above example, we have imported standard objects record, for custom objects use the below syntax.

import ACCOUNT_NAME from "@salesforce/schema/Custom_Object__c.Parent__r.Name";
import GRAND_PARENT_ACCOUNT from "@salesforce/schema/Custom_Object__c.Parent__r.Grand_Parent__r.Name";

Also, you need to import the getRecord method like below.

import { getRecord, getFieldValue } from "lightning/uiRecordApi";

Second thing, you need to wire the getRecord and getFieldValue methods that we imported in the last step.

The Final Code

I have created a simple component named showParentFields

showParentFields.js

import { LightningElement, api, wire } from "lwc";
import { getRecord, getFieldValue } from "lightning/uiRecordApi";
import ACCOUNT_NAME from "@salesforce/schema/Contact.Account.Name";
import GRAND_PARENT_ACCOUNT from "@salesforce/schema/Contact.Account.Parent.Name";
import CONTACT_NAME from "@salesforce/schema/Contact.Name";

export default class ShowParentFields extends LightningElement {
	@api recordId;

	@wire(getRecord, {
		recordId: "$recordId",
		fields: [CONTACT_NAME, ACCOUNT_NAME, GRAND_PARENT_ACCOUNT]
	})
	contactData;

	get contactName() {
		return getFieldValue(this.contactData.data, CONTACT_NAME);
	}

	get parentAccountName() {
		return getFieldValue(this.contactData.data, ACCOUNT_NAME);
	}

	get grandParentAccountName() {
		return getFieldValue(this.contactData.data, GRAND_PARENT_ACCOUNT);
	}
}

showParentFields.html

<template>
    <lightning-card title="Get Parent fields using uiRecordApi Demo">
        <div class="slds-var-p-around_medium">
            <h1 class="slds-text-body_regular"><b>Contact Name:</b> {contactName}</h1>
            <h1 class="slds-text-body_regular"><b>Parent Account Name:</b> {parentAccountName}</h1>
            <h1 class="slds-text-body_regular"><b>Grand Parent Account Name:</b> {grandParentAccountName}</h1>
        </div>
    </lightning-card>
</template>

showParentFields.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>49.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

The final output

References