+ Start a Discussion
Daniel Velez 8Daniel Velez 8 

$recordId in Lightning Web Components

Hello all.

I have this js in a LWC

 

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import SUPERVISOR_FIELD from '@salesforce/schema/Bear__c.Supervisor__c';
const bearFields = [SUPERVISOR_FIELD];
export default class BearSupervisor extends LightningElement {
	@api recordId; // Bear Id
	@wire(getRecord, { recordId: '$recordId', fields: bearFields })
	bear;
	get supervisorId() {
		return getFieldValue(this.bear.data, SUPERVISOR_FIELD);
    }
    
}


how is this code retrieving the recordId? why it is inside single quotes (' '). I know that the "$" makes it reactive. 

Is recordId a special word in salesforce/javascript?

recordId is enver defined in the html
 

<template>
	<lightning-card title="Supervisor" icon-name="standard:people">
		<div class="slds-m-around_medium">
			<!-- Show supervisor when bear is loaded -->
			<template if:true={bear.data}>
				<lightning-record-form
					object-api-name="Contact"
					record-id={supervisorId}
					layout-type="Compact">
                </lightning-record-form>
			</template>
			<!-- Data failed to load -->
			<template if:true={bear.error}>
				<div class="slds-text-color_error">
					An error occurred while loading the bear record
				</div>
			</template>
		</div>
	</lightning-card>
</template>
this is the configuration file in case you need it 
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="bearSupervisor">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
<targets>
	<target>lightning__RecordPage</target>
</targets>
<targetConfigs>
	<targetConfig targets="lightning__RecordPage">
		<objects>
			<object>Bear__c</object>
		</objects>
	</targetConfig>
</targetConfigs>
</LightningComponentBundle>
 

I was looking for documentation about this but I can not fin anything.

I will apreciate any documentation or any comment, I can not understand why this works.

{tushar-sharma}{tushar-sharma}
In the wire adapter’s configuration object, prefix a value with $ to reference a property of the component instance. The$ prefix tells the wire service to treat it as a property of the class and evaluate it as this.propertyName. The property is reactive. If the property’s value changes, new data is provisioned and the component rerenders.

You can check mopre details here: https://developer.salesforce.com/docs/component-library/documentation/lwc/data_wire_service_about

Thanks
Tushar Sharma
https://newstechnologystuff.com/ (https://newstechnologystuff.com)