4

I've a problem on a wired apex method not getting called from a Lightning Web Component on load.

This web component is inside a parent Lightning Aura Component which has a date picker where today's date is defaulted on initialization. Related to the date all events are shown through the child LWC.

First time , the date is coming correct but no records are coming up as no call is being made to the apex method. Now on changing the date (changing date to 5th Jan and then coming back to 4th Jan i.e. today) it does give the records properly.

I'm not able to understand why it does not give all records related to today's date on the 1st very time . As far I understand , wired methods always gets invoked the time the component is being created.

Aura Component Code (Parent Component) :

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<aura:attribute name="chosenDate" type="Date" />
<aura:handler name="init" action="{!c.doInit}" value="{!this}" />
<lightning:input type="date" name="inpDate" value="{!v.chosenDate}"/>
<c:evtCmpTst chosenDt="{!v.chosenDate}"/>

Aura JS Controller:

doInit : function(component, event, helper) {
    //old code . was in the original question
    /*var today = new Date();
    component.set('v.chosenDate', today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate());*/
    //this works fine. updated based on Mohith's answer
    var today = new Date().toISOString().slice(0,10);
    component.set('v.chosenDate', today);
}

LWC HTML

<template>
<lightning-input type="date" name="inpDate" value={chosenDate}></lightning-input>
<lightning:card>     
    <template for:each={results} for:item="event">
        <li key={event.Id}>
            <p class="slds-p-horizontal_small">
                <b>Subject : </b>{event.Subject} <br/>
                <b>Start Time : </b>{event.StartDateTime} <br/>
                <b>End Time : </b>{event.EndDateTime}
            </p>
        </li>
    </template>

</lightning:card>

LWC JS

import { LightningElement,api,wire,track } from 'lwc';
import getEvents from '@salesforce/apex/RetrieveEvents.getEvents';


export default class EvtCmpTst extends LightningElement {

@api chosenDt;
@track results;

@wire(getEvents, {chosenDt : '$chosenDt'}) 
events({ error, data }) {
    console.log(this.chosenDt); //this is coming properly as today's date on load
    console.log(data); // this is coming undefined
    this.results = data; 
    this.error = error;
    console.log(this.results);
}
}

APEX

public with sharing class RetrieveEvents {
@AuraEnabled(cacheable=true)
public static List<Event> getEvents(Date chosenDt) {

    Time startTime = Time.newInstance(0, 59, 59, 0);
    Time endTime = Time.newInstance(23, 59, 59, 0);
    DateTime dt1 = DateTime.newInstance(chosenDt, startTime);
    DateTime dt2 = DateTime.newInstance(chosenDt, endTime);
    List<Event> scheduledEvents = [SELECT Id,Subject, StartDateTime, EndDateTime, User_Choice__c FROM Event WHERE (StartDateTime >: dt1 AND EndDateTime <: dt2) ] ;
    return scheduledEvents;
}
}

Is this expected behavior (if not then how do I show the records on load from the child LWC) or am I doing something wrong?

EDIT - I tried calling the method imperatively as well but I still don't get any records on load.

  • Did you check your Apex code to confirm that records are showing up as expected? – Brian Miller Jan 4 '20 at 17:20
  • Yes I did. As i've mentioned above that on changing the date to 5th Jan and then again coming back to today i.e. 4th Jan I am able to see all the event records . – Sagnik Jan 4 '20 at 17:22
  • I see an extra ' in {chosenDt : ''$chosedDt'} but don't think that's the issue – Brian Miller Jan 4 '20 at 17:36
  • Sorry, that's a typo caused when I was framing the question! – Sagnik Jan 4 '20 at 17:49
  • Can you please check console.log(JSON.stringify(data)) in wire method and tell what is printed in console – Sahil Malhotra Jan 4 '20 at 18:53
4

The issue is happening because the parameter that is flowing from your lwc component to the apex controller is not in expected date format upon load.

The parameter value that aura enabled methods with date format expect should be of type "yyyy-MM-DD" strictly.

In your aura init method i did one line code change shown as below to match the format the aura component method needs.

({
    doInit : function(component, event, helper) {
     var today = new Date().toISOString().slice(0,10);
     component.set('v.chosenDate', today);
   }
})

The above change fixed the code.

The best way to debug these issues is use chrome dev console and enable pause on exceptions to see whats wrong. In this case the promise was rejected from server and it was swallowed.

enter image description here

  • 1
    Mohith , thanks for the clear explanation. Before your answer I was thinking of setting a string attribute for the date and then parse it on apex. But I guess your solution is the correct approach..I will try this and let you know. – Sagnik Jan 5 '20 at 12:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.