Cannot read property fields of undefined

Question

I need to understand where I am going wrong in the below piece of code. The error screenshot is shown below.

HTML Template:-
<template>
   {name} 
</template>
 JS Controller:-
import { LightningElement,api,wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import LASTNAME_FIELD from '@salesforce/schema/Contact.LastName';

export default class FetchRecords extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields:LASTNAME_FIELD})
    contact;
        get name(){
            return this.contact.data.fields.LastName.value;
        }
}

Answer 1

I believe the issue might be get might be getting called before wire gets executed as it is directly called without using getFieldValue.

The correct syntax as per documentation is to use getFieldValue

import { getRecord, getFieldValue } from 'lightning/uiRecordApi';


@wire(getRecord, { recordId: '$recordId', fields:LASTNAME_FIELD})
    contact;
        get name(){
            return getFieldValue(this.contact.data, LASTNAME_FIELD);
        }