[SalesForce] Accessing / Dealing with Undefined Variables returned from Apex Method in LWC

An issue with the Apex controller / LWC interaction is that when retrieving values from an Apex controller / method the returned object will not bring back object properties that do not have values.

for example if we are trying to retrieve an Account from the database, we use @wire, call the apex method and within the Apex method utilize a query to retrieve necessary values.

return SELECT Id, Name, Occupation__c from Account LIMIT 1

the issue is that if Occupation__c is null in the database, then the field name "Occupation__c" is not even returned in the object passed back to the LWC. Which brings me to my question, how best to handle this in LWC?

currently I am using this method to "validate" the values coming back from the Apex method

 this.account = {
                AccountId: data.Id,
                OwnerId: data.OwnerId ? data.OwnerId : "",
                Occupation: data.Occupation__c ? data.Occupation__c : "",
                }

My Question is, is this a more efficient way to do this, is this best practice? does Salesforce have any examples to reference?

Best Answer

Well,

// account.js
import { LightningElement, wire, track } from 'lwc';

// Wire adapter to load records.
import { getRecord } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import ID_FIELD from '@salesforce/schema/Accoun.Id';
import OCUPATION_FIELD from '@salesforce/schema/Account.Occupation__c';

export default class AccountDetail extends LightningElement {
   // Id of Account to display.
   recordId;

   // Wire to object //
   @wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD, ID_FIELD, OCUPATION_FIELD] })
   account;

   get name() {
        return getFieldValue(this.account.data, NAME_FIELD);
   }

   get ocupation(){
        return getFieldValue(this.account.data, OCUPATION_FIELD);
   }

}

You can get more information here: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_wire_adapters_record

The best approach if you still want to use the apex controler is save the data in an object and then resolve those using getters:

@wire(getMyAccount) wiredAccount({ data }) {
    if (data) {
        this.account = data;
    } 
}

get name() {
    return this.account && getSObjectValue(this.account, NAME_FIELD); }

More info here: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/apex

Related Solutions

[SalesForce] How to pass a SObject record from LWC to a custom Apex method to persist data

Here is my code which I use to CRU records in LWC. Fairly basic example. I am not using String or JSON manipulation. I am also using static binding using fieldName imports

HTML:

<lightning-input label="FirstName" value={realFormData.FirstName} if:true={realFormData} onchange={updateValue}  data-field="FirstName"></lightning-input>
<lightning-input label="LastName" value={realFormData.LastName} if:true={realFormData} onchange={updateValue}  data-field="LastName"></lightning-input>

{recordId} <br/>
<button  class="slds-button" onclick={saveRecord}> Save Record</button>

<br/>
<button  class="slds-button" onclick={createRecord}> Create new hardcored CONTACT Record and load in UI</button>

JS:

import { LightningElement ,wire,track,api } from 'lwc';
import getMyContact from "@salesforce/apex/ContactController.fetchContact";
import updateMyContact from "@salesforce/apex/ContactController.updateContact";
import createMyContact from "@salesforce/apex/ContactController.createContact";
import { refreshApex } from '@salesforce/apex';
import CONTACT_FIRSTNAME from '@salesforce/schema/Contact.FirstName';
import CONTACT_LASTNAME from '@salesforce/schema/Contact.LastName';


export default class MyCmp extends LightningElement {


 @api wiredContact;
 @api recordId;
 @api realFormData;


 @wire (getMyContact , { contactId: '$recordId' })
        fetchedContact( resp){
           this.wiredContact = resp;
           this.realFormData = {... this.wiredContact.data};

    }


    updateValue(event){



        this.realFormData = {...this.realFormData , [event.target.dataset.field] : event.detail.value};
        console.log( this.realFormData);
    }


    saveRecord(event ){

        updateMyContact({con : this.realFormData}).then(()=>{

            console.log('Refresh Apex called');
            refreshApex(this.wiredContact);
        });

    }


    createRecord(event ){
            let newContact = { [CONTACT_FIRSTNAME.fieldApiName] : 'Pikachdu' ,[CONTACT_LASTNAME.fieldApiName] : 'Raichu' };



            createMyContact({con : newContact}).then((resp)=>{
                            this.recordId = resp.Id; //this will auto call wireMethod/


            }).catch((err) => {
               // Handle any error that occurred in any of the previous
               // promises in the chain.

               console.log(JSON.stringify(err));
             });



        }




}

Apex:

public class ContactController {

    @AuraEnabled(cacheable=true)
    public static Contact fetchContact(Id contactId){
        return [SELECT Id,FirstName,LastName FROM COntact where id=:contactId LIMIT  1];
    }


    @AuraEnabled
    public static void updateContact(Contact con){
        update con;
    }

    @AuraEnabled
    public static contact createContact(Contact con){

        insert con;
        return con;


    }

}

[SalesForce] Accessing single element of List from Apex in LWC

singleAccount is declared by initialising to null. So even before wired function gets back the data, the template is trying to display singleAccount.Name which is throwing error.

Change it to:

@track singleAccount = {};

Now its initialised Object, so you will not get error.

As Martin Lezer, pointed, you can also include empty check <template if:true={singleAccount}>.

As a good practice, always initialise Objects and Arrays (non-primitive data types) during declaration.

Best Answer

Related Solutions

[SalesForce] How to pass a SObject record from LWC to a custom Apex method to persist data

[SalesForce] Accessing single element of List from Apex in LWC

Related Topic