How to use getRecord in LWC?

  Using lightning/uiRecordApi we can perform operations as mentioned below without using Apex.

1) Create a record 

2) Get record data

3) Delete a record

4) Get a field value from record

5) Update a record and etc.

In this blog post we will learn How to get record data in lightning/uiRecordApi using getRecord?

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

Let's understand with simple example as explained below:

getRecordLWCExample.html

<template >

    <template if:true={contactData}>

     Contact Name : {contactName} <br/>

     Contact Phone  : {contactPhone}

    </template>

</template>

getRecordLWCExample.js

import { LightningElement, api, wire, track } from 'lwc';

import { getRecord } from 'lightning/uiRecordApi';

const FIELDS = ['Contact.Name', 'Contact.Phone'];

export default class GetRecordLWCExample extends LightningElement {

    @api recordId;

    contactData;

    contactName;

    contactPhone;

    @wire(getRecord, { recordId: '$recordId', fields: FIELDS, modes : ['View', 'Edit', 'Create']})

    wiredRecord({ error, data }) {

        if (error) {

             console.log('Received Error');

        } else if (data) {

            console.log('data is'+data);

            

            this.contactData = data;

            this.contactName =   this.contactData.fields.Name.value;

            this.contactPhone =  this.contactData.fields.Phone.value;

            console.log('contact Name is'+this.contactName);

            console.log('contact Phone is'+this.contactPhone);

            

        }

    }

}

getRecordLWCExample.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>50.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

 

        <target>lightning__RecordPage</target>

 

    </targets>

</LightningComponentBundle>

Add the above component to contact page as shown below,