using @wire and field value is returning undefined

Question

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));
                })


        } 

    }

}

Answer 1

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
    }
}