2

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));
            })
        } 
    }
}
2
  • 1
    One of the things I struggled with when first working lwcs is understanding that almost everything is Async. There's a chance that your callout is happening before the wire method is returning. This component shows a trick I used to help resolve timing issues (Around line 114). No idea if it is considered a best practice or not.
    – gNerb
    Feb 21, 2020 at 19:00
  • @gNerb I made updates to my code to reflect your feedback but I'm still struggling to figure out why the serial number is undefined. Do you see any errors in my code?
    – J.Ro
    Feb 25, 2020 at 19:23

1 Answer 1

2

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
    }
}
1
  • Are you saying that I can remove the connectedCallback and add the code to the wiredRecord function and it will behave the same way. I need the data to update when the page is loaded and edited. Based on your feedback I made the updates to the above code. Am I doing it wrong I'm still not getting a defined serial number?
    – J.Ro
    Feb 25, 2020 at 19:09

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .