[SalesForce] LWC is missing data returned from apex method

There's a strange behavior when analyzing result of an apex method compared to actual data received in LWC.

A LWC component (added on a Lightning record page) is calling an Apex method via @wire function where the return type of the apex method is a Map<String,Object>. It seems that when the map property's value is null, wire service is ignoring them in the result.

The objective of the LWC component is to display the apex data in a table with mass edit feature, such that we can edit existing values and complete null fields, this is why null field values are also important.

All components are saved with API version 50.

Here's a just simple example illustrating the issue and including results obtained from logs:

Apex controller

public with sharing class ContactServerController {

    @AuraEnabled(cacheable=true)
    public static Map<String,Object> getContactList(String accId) {
        
        Map<String,Object> result = new Map<String,Object>();
        List<Map<String,Object>> listMContacts = new List<Map<String,Object>>();

        for(Contact con : [SELECT Id, FirstName, LastName,MobilePhone, Phone
            FROM Contact
            WHERE AccountId = :accId and MobilePhone = null
            LIMIT 5]){
            
            Map<String,Object> mapContacts = new Map<String,Object>();
            mapContacts.put('Id',con.Id);
            mapContacts.put('FirstName',con.FirstName);
            mapContacts.put('LastName',con.LastName);
            mapContacts.put('MobilePhone',con.MobilePhone);
            mapContacts.put('Phone',con.Phone);
            listMContacts.add(mapContacts);
        }
        
        result.put('records',listMContacts);
        system.debug(LoggingLevel.DEBUG, '###Data result = '+ result);

        return result;
    }
}

Debug logs

###Data result = {records=({FirstName=Jack, Id=003B000000H65ZFIAZ, LastName=Rogers, MobilePhone=null, Phone=(555) 000-0000}, 
{FirstName=Jane, Id=003B000000I2tm2IAB, LastName=Doe, MobilePhone=null, Phone=null})}

LWC JS Controller

import { LightningElement, api, wire, track } from 'lwc';
import fetchContactList from '@salesforce/apex/ContactServerController.getContactList';

export default class SampleFindContacts extends LightningElement {
    @track recordData = [];
    @api recordId ='';
    @track wiredsObjectData;

    @wire(fetchContactList, { accId: '$recordId'})
    wiredSobjects(result) {
        this.wiredsObjectData = result;
        if (result.data) {
            this.recordData = result.data.records;
            console.log(JSON.stringify(this.recordData));

        }
    }
}

Console log

[{"Id":"003B000000H65ZFIAZ","FirstName":"Jack","LastName":"Rogers","Phone":"(555) 000-0000"},
{"Id":"003B000000I2tm2IAB","FirstName":"Jane","LastName":"Doe"}]

Notice the result of apex debug logs, we can see that MobilePhone and Phone properties have null values.

But when comparing with logs from LWC JS function, these 2 properties are not returned at all received.
Why are the null properties missing ?

Has anyone encountered such issue ?

Best Answer

If you would like to keep it consistent, probably try to send map as a String and then Parse it in LWC

##Apex Changes :

return JSON.serialize(result);

##LWC Changes :

this.recordData = JSON.parse(result.data).records;

With Current Code -> APEX is probably not sending the null to JS (As JS is not receiving the null params), it can be because of LDS optimization -

(https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.data_ui_api)

Lightning Data Service does a lot of work to make code perform well.

  • Optimizes server calls by bulkifying and deduping requests.