🔄 How to Use getRelatedListRecords in LWC to Fetch Related List Data in Salesforce

🔹 Introduction

Salesforce provides a powerful UI API method called getRelatedListRecords that allows you to fetch related list data without writing any Apex.

• Contacts related to an Account
• Opportunities related to an Account
• Cases under a Contact
• Any standard or custom related list

In this tutorial, you’ll learn how to fetch Contacts related to an Account and display them in a lightning-datatable.

🎯 Goal

• Use getRelatedListRecords via UI API
• Map LDS response into a usable JS array
• Display data using lightning-datatable
• Handle errors cleanly

🏗️ Step 1: LWC HTML Structure

<template>
  <lightning-card title="Contacts (Related List)">
    <template if:true={data}>
      <lightning-datatable
        key-field="Id"
        data={data}
        columns={columns}
      ></lightning-datatable>
    </template>

    <template if:true={error}>
      <p>Error loading related records.</p>
    </template>
  </lightning-card>
</template>

⚙️ Step 2: JavaScript

import { LightningElement, api, wire } from "lwc";
import { getRelatedListRecords } from "lightning/uiRelatedListApi";

export default class TestGetRelatedListData extends LightningElement {
  @api recordId;

  columns = [
    { label: "Name", fieldName: "Name" },
    { label: "Email", fieldName: "Email" }
  ];

  data = [];
  error;

  @wire(getRelatedListRecords, {
    parentRecordId: "$recordId",
    relatedListId: "Contacts",
    fields: ["Contact.Id", "Contact.Name", "Contact.Email"]
  })
  wiredRecords({ data, error }) {
    if (data) {
      this.data = data.records.map(rec => ({
        Id: rec.fields.Id.value,
        Name: rec.fields.Name.value,
        Email: rec.fields.Email.value
      }));
      this.error = undefined;
    } else if (error) {
      this.error = error;
      this.data = [];
    }
  }
}

🧾 Step 3: meta.xml

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>62.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__RecordPage</target>
  </targets>
</LightningComponentBundle>

🧠 How It Works

• parentRecordId → current record context
• relatedListId → related list API name
• fields → fields to fetch
• LDS returns nested JSON, so we manually map it for datatable usage

💬 Bonus Tips

• Works with any related list (Cases, Opportunities, custom)
• No Apex, no SOQL
• Respects FLS & CRUD automatically

📺 Watch the Video

🧾 Conclusion

getRelatedListRecords is one of the easiest and most powerful ways to load related list data in LWC without Apex.