[SalesForce] using @wire and field value is returning undefined

I'm still getting an undefined serial even after removing the connectedCallback and using the wiredRecord function. Do you see what I'm missing? Sorry if its obvious I am very new to all of this.

import { LightningElement, track, api, wire } from 'lwc';//api, wire 
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
//import field reference from schema
import SERIAL_FIELD from '@salesforce/schema/Asset.Serial_Test__c';
const field = [SERIAL_FIELD];
export default class TestCallout extends LightningElement {
    @track toDoData;
    @track serial;
    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: field})asset;
   
    wiredRecord({error, data}){
        if (error) {
            let message = 'Unknown error';
            if (Array.isArray(error.body)) {
                message = error.body.map(e => e.message).join(', ');
            } else if (typeof error.body.message === 'string') {
                message = error.body.message;
            }
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error loading contact',
                    message,
                    variant: 'error',
                }),
            );
        } else if (data){
            //make callout using fetch
            let serial = getFieldValue(this.asset.data, SERIAL_FIELD);
            fetch('https://jsonplaceholder.typicode.com/todos?id='+ serial, 
            //endpoint passes serial number from current sfdc record
            {
                // Request type
                method:"GET",
        
                headers:{
                    // content type
                    "Content-Type": "application/json",
                }
            })
            .then((response) => {    
                return response.json(); // returning the response in the form of JSON
            })
            .then((jsonResponse) => {
                let objData = {
                    title : '',
                    completed : '',
                };
                window.console.log('jsonResponse ===> '+JSON.stringify(jsonResponse));
                // retriving the response data
                let jsonData = jsonResponse[0];
                
                // adding data object
                objData.title = jsonData.title; 
                objData.completed = jsonData.completed;
            
                // adding data object to show in UI
                this.toDoData = objData;
            })
            .catch(error2 => {
                window.console.log('callout error ===> '+JSON.stringify(error2));
            })
        } 
    }
}

Best Answer

2 things

1) The syntax for @getRecord is incorrect. It should be

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

2) The default value of wire variables will be present in lifecycle callbacks, thus connected callback does not have the serial field. See below excerpt from Salesforce

The property is assigned a default value after component construction and before any other lifecycle event. The default value is an object with data and error properties of undefined. Therefore, you can access the property’s value in any function, including functions used by the template or used as part of the component’s lifecycle.

Fix would be to use imperative getRecord

@wire(getRecord, { recordId: '$recordId', fields: FIELDS })
    wiredRecord({ error, data }) {
    if(data){
        //Do your fetch call
    }
}
Related Topic