making an LWC dynamic?

Question

I have an LWC that i placed on the contact page and would like for it to display the contacts information, but have it change to whatever contact the user is currently viewing.

so far,the card is completely blank other than the card title, but if I hard-code the contact recordId then it shows the information i want.

how can i grab the recordId?

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

const fields = [
    'Contact.Name',
    'Contact.Title',
    'Contact.Phone',
    'Contact.Email'
];

export default class WireGetRecordDynamicContact extends LightningElement {
    @api recordId;
    // recordId="0035e000008eB4vAAE" this is hardcoding the recordId

    @wire(getRecord, { recordId: '$recordId', fields })
    contact;

    get name() {
        return this.contact.data.fields.Name.value;
    }

    get title() {
        return this.contact.data.fields.Title.value;
    }

    get phone() {
        return this.contact.data.fields.Phone.value;
    }

    get email() {
        return this.contact.data.fields.Email.value;
    }
}

HTML

    <template>
    <lightning-card
        title="WireGetRecordDynamicContact"
        icon-name="standard:contact"
    >
        <template if:true={contact.data}>
            <div class="slds-var-m-around_medium">
                <p>{name}</p>
                <p>{title}</p>
                <p>
                    <lightning-formatted-phone
                        value={phone}
                    ></lightning-formatted-phone>
                </p>
                <p>
                    <lightning-formatted-email
                        value={email}
                    ></lightning-formatted-email>
                </p>
            </div>
        </template>
    </lightning-card>
</template>

XML

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>53.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Contact</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Answer 1

I think it just might be because of the getter you're using. The @api variables are not actually available when the component is placed in the DOM instead are available later during the render cycle.

It's great you're using reactive wire properties & so you must be getting data again when recordId is available.

However, I assume the component fails on the first run when recordId was not available & getters will still be called. Just because we didn't have anything in this.contact, accessing .fields would throw an error, Can't read properties of undefined, reading 'fields'.

You should be good once you make these changes in your component js.

get name() {
    return this.contact?.data.fields.Name.value ?? '';
}

get title() {
    return this.contact?.data.fields.Title.value ?? '';
}

get phone() {
    return this.contact?.data.fields.Phone.value ?? '';
}

get email() {
    return this.contact?.data.fields.Email.value ?? '';
}

You can also use getFieldValue(record, field) from lightning/uiRecordApi to get values of the fields from contact from getRecord.

1. Add these imports,

    import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
    import CONTACT_NAME from '@salesforce/schema/Contact.Name'.
    import CONTACT_TITLE from '@salesforce/schema/Contact.Title'.
    import CONTACT_PHONE from '@salesforce/schema/Contact.Phone'.
    import CONTACT_EMAIL from '@salesforce/schema/Contact.Email'.

2. Update your getter functions.

    get name() {
        return getFieldValue(this.contact.data, CONTACT_NAME);
    }
    
    get title() {
        return getFieldValue(this.contact.data, CONTACT_TITLE);
    }
    
    get phone() {
        return getFieldValue(this.contact.data, CONTACT_PHONE);
    }
    
    get email() {
        return getFieldValue(this.contact.data, CONTACT_EMAIL);
    }

3. Add an if:true={contact.data} to prevent child getters from being called when contact doesn't have any data to show.