Use getRecord in LWC Salesforce

Hello folks, today we will discuss How to use getRecord in LWC Salesforce. We use this UI Api to get a record. Provide the record Id and get the record. Here we will pass the record Id in LWC UI Api and fetch the record. We show the record in HTML.

Also, check this: Icons inside Input Fields LWC

Key Highlights :

1. import getRecord.
2. No use of Apex for get record.
3. import { getRecord } from ‘lightning/uiRecordApi’

Syntax :

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

@wire(getRecord, { recordId: string, fields: string|string[], optionalFields?: string|string[] })
propertyOrFunction

@wire(getRecord, { recordId: string, layoutTypes: string|string[],
                   modes?: string|string[], optionalFields?: string|string[] })
propertyOrFunction

Code :

getRecordLWC.HTML :

<template>
	<lightning-card title="Use getRecord in LWC Salesforce/ LDS Get Record" icon-name="standard:record">
		<div class="slds-m-around_medium">
			<template if:true={data}>
				Account Name : {data.fields.Name.value} <br/>
                Account Number  : {data.fields.AccountNumber.value}
            </template>
		</div>
	</lightning-card>
</template>

getRecordLWC.JS:

import { LightningElement, api, wire, track } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
const FIELDS = ['Account.Name', 'Account.AccountNumber'];

export default class GetRecordLWC extends LightningElement {
    @track accId = '0016F00002QHh3EQAT'; //replace account Id with your org account Id
    data;
    error;

    @wire(getRecord, { recordId: '$accId', fields: FIELDS, modes: ['View', 'Edit', 'Create'] })
    wiredRecord({ error, data }) {
        if (data) {
            console.log(data);
            this.data = data;
        } else if (error) {
            console.log(error);
            this.error = error;
        }
    }
}

getRecordLWC.JS-meta.xml:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>55.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
	</targets>
</LightningComponentBundle>

Output :

Reference:

1. getRecord