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

🔹 Introduction

Salesforce provides an amazing UI API method called getRelatedListRecords that lets you fetch related list data without writing any Apex. This is extremely useful when you want to display data like:

• 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 using getRelatedListRecords and show them in a lightning-datatable.

🎯 Goal

• Use getRelatedListRecords to load related list data
• Map LDS response into a usable JS array
• Display results using lightning-datatable
• Handle errors cleanly

🏗️ Step 1: LWC HTML Structure

This is the layout that displays related contacts inside a card:

<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 — Fetch Related List Records

Using @wire with getRelatedListRecords:

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) {
      console.log("Raw LDS Data:", JSON.parse(JSON.stringify(data)));

      // Convert LDS format → datatable format
      this.data = data.records.map((rec) => ({
        Id: rec.fields.Id.value,
        Name: rec.fields.Name.value,
        Email: rec.fields.Email.value
      }));

      console.log("Datatable Data:", this.data);

      this.error = undefined;
    } else if (error) {
      this.error = error;
      this.data = [];
    }
  }
}

🧾 Step 3: meta.xml File

Expose your component on the record page:

<?xml version="1.0" encoding="UTF-8"?>
<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 → the current record where component is placed
• relatedListId → API name of related list (Contacts)
• fields → fields you want to fetch
• LDS returns nested JSON, so we manually extract values to map them into a clean datatable format

This means NO Apex, NO SOQL — everything is handled via UI API.

💬 Bonus Tips

• You can sort or filter the retrieved data manually
• Replace Contacts with any related list (Opportunities, Cases, etc.)
• Use this in Account, Contact, or custom object record pages
• UI API respects FLS & CRUD automatically

📺 Watch the Video Tutorial

I’ve also created a detailed explanation on YouTube:
👉 Watch on YouTube (CodeWithAnand)

🧾 Conclusion

getRelatedListRecords is one of the easiest and most powerful ways to load related list data in LWC — without writing a single line of Apex. If you’re building record page components, this is a must-use tool.