Retrieve Data From Salesforce in LWC Without Apex

Usually, when we retrieve data from Salesforce org, we use the Apex class where we write the SOQL query. However, this can also be done without using the Apex class.

Instead of Apex, we can use Lightning Data Service and Wire Adapters to get data from the Salesforce org.

Using the above methods, let me show you how to retrieve data from Salesforce in LWC without Apex class.

Table of Contents

Get Data From Salesforce in LWC Without Apex

We can retrieve data without an Apex class by using the two methods below:

Lightning Data Service (LDS).
Wire Adapters in LWC.

Let me explain each one with examples.

1. Using Lightning Data Services (LDS) in Salesforce

In Salesforce, Lightning Data Service (LDS) provides a declarative approach to interacting with Salesforce data.

It handles record creation, retrieval, update, and deletion (CRUD operations) without writing Apex code.

LDS is perfect for handling standard object data and is fully integrated with the Lightning Experience.

Key Advantages:

No need to write Apex or manage server-side logic.
Built-in caching, performance optimization, and record management.
Fully supports standard objects.

Lightning-Record-Form In Salesforce LWC

The lightning-record-form automatically generates a form for creating, viewing, or editing a record. It’s an easy way to handle standard record forms.

First, we need to create an LWC component in VS code. As you create the component, HTML, JS, and a meta.XML file will be created.

We will not use the Apex class to display the form; instead, we will use the lightning-record-form tag in the HTML file.

In the below script, we display the account object form in view mode. You can also create a record when you click the edit button on the form.

<template>
    <lightning-record-form
        object-api-name="Account"
        record-id={accountId}
        layout-type="Full"
        mode="View">
    </lightning-record-form>
</template>

Then, we need to deploy this component in the Salesforce record or home page. To do that, open the meta.XML file and follow the code below.

To use the component, we need to expose it. To do that, we need to set the isExposed property to true, and in the target tag, you can specify where you want to deploy the component.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>

Then, as you navigate to the Salesforce org, you will see the fields we have in the account object. Also, here, we didn’t use the Apex class to retrieve the account fields even though we can see the fields using the lightning-record-form tag.

Lightning-Record-Edit-Form In Salesforce LWC

This component provides more flexibility compared to lightning-record-form since you can specify which fields to include in your form.

When we use the lightning-record-form tag, it retrieves all the fields in the object we provided, but in the lightning-record-edit-form, we can select which fields we want to display on the form.

In the HTML file below, you can see we used the lightning-record-edit-form tag. You can then specify which fields you want to display on the form.

<template>
    <lightning-record-edit-form
        object-api-name="Account"
        record-id={accountId}
        onsuccess={handleSuccess}>
        <lightning-input-field field-name="Name"></lightning-input-field>
        <lightning-input-field field-name="Industry"></lightning-input-field>
        <lightning-button class="slds-m-top_small" type="submit" label="Save"></lightning-button>
    </lightning-record-edit-form>
</template>

The image below shows that the form has only the Name and Industry fields provided in the HTML file.

Lightning Record Edit Form in Salesforce

Lightning-Record-View-Form in Salesforce LWC

This component is similar to lightning-record-edit-form, but lightning-record-view-form only displays data in a read-only form.

In the script below, you can see we have used lightning-record-view-form to display the fields and their values.

To display the values of fields, we need to use the lightning-output-field field-name tag in HTML.

HTML File:

<template>
    <lightning-record-view-form 
          object-api-name="Account"
           record-id={accountId}> 
        <lightning-output-field field-name="Name"></lightning-output-field>
        <lightning-output-field field-name="Industry"></lightning-output-field>
    </lightning-record-view-form>
</template>

To display the values in the provided fields, we need to create a JS file that retrieves the account ID of the opened account record.

import { LightningElement, api } from 'lwc';

export default class GetRecords extends LightningElement {
    @api recordId;
           get accountId() {
                return this.recordId;
           }
}

In the image below, you can see the form-displayed fields that we provided and the values they fetched from the opened account record.

Lightning Record View Form in Salesforce LWC

2. Using Wire Adapters in Salesforce LWC

The Wire Adapters in LWC allow us to retrieve Salesforce data using pre-built adapters. These adapters handle fetching data declaratively from Salesforce objects.

Using the @wire decorator, you can wire data from Salesforce directly into your component without using the Apex class.

Advantages of using Wire Adapters in LWC :

The wire adapters are simple and declarative.
It supports real-time updates.
No Apex is needed for standard use cases.

Below, I will explain some examples of each wire adapter and their uses and advantages.

getRecord Wire Adapter:

The getRecord wire adapter simplifies data retrieval by removing the need for custom Apex code. It then automatically handles field-level security and sharing rules.

JS File in LWC:

The JS file below in the LWC component fetches and displays an account record’s Name and Industry fields using the standard getRecord wire adapter.

The @api recordId receives the current record’s ID when the component is placed on an account record page.

The @wire getRecord adaptor retrieves the specified fields from Salesforce based on the reactive record ID. Because of the getRecord adaptor here, we don’t need to use the Apex class to retrieve the fields from the Salesforce org.

The retrieved data is stored in the account property, and two getter methods (name and Industry) extract the field values.

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

import NAME_FIELD from '@salesforce/schema/Account.Name';
import PRIORITY_FIELD from '@salesforce/schema/Account.Account_Priority__c';

export default class getRecords extends LightningElement {

    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD, PRIORITY_FIELD] })
    account;

    get Name() {
        return this.account.data ? this.account.data.fields.Name.value : '';
    }
    get Priority() {
        return this.account.data ? this.account.data.fields.Account_Priority__c.value : '';
    }
}

HTML File:

To display the retried values in the field, we need to add those fields in the HTML file to add components on the Salesforce org record page.

For that, here we added a paragraph tag, provided a label, and the variable where we stored the retrieved data in the JS file.

<template>
    <p>Name: {Name}</p>
    <p>Account Priority: {Priority}</p>
</template>

This wire adapter retrieves data for a single Salesforce record. It automatically fetches the specified fields for the record with the provided ID.

Retrieve Data From Salesforce in LWC Without Apex

GetObjectInfo Wire Adapter:

The GetObjectInfo wier adapter provides detailed information about an object’s metadata, which is very useful for building dynamic applications that need to access object metadata at runtime.

JS File:

In the JS file below, we have used @wire getObjectInfo to retrieve the object API name. The retrieved data is stored in the accountInfo property, and two getter methods (apiName and label) extract the values.

import { LightningElement, wire } from 'lwc';

import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJ from '@salesforce/schema/Account';

export default class AccountInfo extends LightningElement {
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJ })
    accountInfo;
    
    get apiName() {
        return this.accountInfo.data ? this.accountInfo.data.apiName : '';
    }

    get label() {
        return this.accountInfo.data ? this.accountInfo.data.label : '';
    }
}

HTML File:

Now, to display the retried values in the field, we need to add those fields in the HTML file to add components on the Salesforce org record page.

For that, here we added a paragraph tag, provided a label, and the variable where we stored the retrieved data in the JS file.

<template>
    <p>Object API Name: {apiName}</p>
    <p>Object Label: {label}</p>
</template>

This wire adapter retrieves metadata for an object, such as field definitions, object labels, and more. This helps to create dynamic forms and layouts based on metadata.

GetObjectInfo Wier Adapter in Salesforce LWC

getPicklistValuesByRecordType Wire Adapter

Using the getPicklistValuesByRecordType wire adaptor, we can retrieve picklist values based on a specific record type. This ensures that picklist values are relevant to the record type being used.

JS File in LWC:

This LWC component fetches the picklist values for the “Industry” field on the account object based on a given record type ID.

The @wire adapter getPicklistValuesByRecordType is used to dynamically retrieve all picklist values associated with a specific record type, allowing the component to adapt the options shown depending on the context.

The industryOptions getter extracts these values from the response, which can be used in a combobox or similar UI element.

import { LightningElement, api, wire } from 'lwc';
import { getPicklistValuesByRecordType } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJ from '@salesforce/schema/Account';

export default class PicklistByRecordType extends LightningElement {
    @api recordTypeId;

    @wire(getPicklistValuesByRecordType, { objectApiName: ACCOUNT_OBJ, recordTypeId: '$recordTypeId' })
    picklistValues;

    get industryOptions() {
        return this.picklistValues.data ? this.picklistValues.data.picklistFieldValues.Industry.values : [];
    }
}

HTML File:

The picklist values in Salesforce LWC will be displayed using the lightning-combobox element in the HTML file. In the combocox tag, we need to provide the variable where we stored the retrieved picklist values data in the JS file.

<template>
    <lightning-combobox options={industryOptions} placeholder="Select an Industry"></lightning-combobox>
</template>

Here, getPicklistValuesByRecordType fetches picklist values for a field on an object based on the specified record type, ensuring data accuracy and relevance.

getPicklistValuesByRecordType wire Adaptor in Salesforce LWC

getRelatedRecords Wire Adaptor:

Using the getRelatedRecords wier adaptor, records related to a parent record can be easily retrieved. Also, complex SOQL queries are not needed in Apex.

JS File in LWC:

This LWC component is created to fetch and display the related contacts of an account using its record ID. It uses the getRelatedListRecords wire adapter from lightning/uiRelatedListApi to retrieve records from the contacts-related list on the account.

The adapter fetches Contact.Name fields based on the Account’s recordId. The fetched data is stored in relatedContacts, and their names are displayed by joining them with commas.

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

export default class RelatedContacts extends LightningElement {
    @api recordId; // This will be the Account Id when placed on the Account record page

    relatedContacts = [];

    @wire(getRelatedListRecords, {
        parentRecordId: '$recordId',
        relatedListId: 'Contacts', // API name of related list (child relationship name)
        fields: ['Contact.Name']
    })
    wiredContacts({ data, error }) {
        if (data) {
            this.relatedContacts = data.records;
        } else if (error) {
            console.error('Error fetching contacts: ', error);
        }
    }

    get contactNames() {
        return this.relatedContacts.map(record => record.fields.Name.value).join(', ');
    }
}

HTML File:

Now, to display the retried related contacts of an account, we need to add a label in the HTML file to add components on the Salesforce org record page.

For that, here we added a paragraph tag, provided a label, and the variable where we stored the retrieved related contact in the JS file.

<template>
    <lightning-card title="Related Contacts">
        <template if:true={relatedContacts}>
            <p><strong>Contact Names:</strong> {contactNames}</p>
        </template>
        <template if:false={relatedContacts}>
            <p>No related contacts found.</p>
        </template>
    </lightning-card>
</template>

The getRelatedRecords retrieves records related to a parent record using a relationship field. This simplifies accessing related data without complex queries.

getRelatedRecords Wier Adaptor in Salesforce LWC

These examples showcase how to use each wire adapter in Lightning Web Components, making it easy to interact with Salesforce data without needing custom Apex code.

Conclusion

I hope you have an idea of how to get data from Salesforce in LWC without an Apex class. In this, I have explained that instead of Apex, we can use Lightning Data Service and Wire Adapters to get data from the Salesforce org.