@wire and static resource JS library

Question

Here's my problem; when i initiate my LWC sometimes it works fine....sometimes the static resource obviously doesn't load before the @wire fires off.

        @wire(fetchEvents,  {usrId: '$userId'})
    eventObj(value){
        this.eventOriginalData = value; 

        let {data, error} = value;
        if(data){
            let events = data.map(event => {
                return { id : event.Id, 
                        title : event.Subject, 
                        start : event.StartDateTime,
                        end : event.EndDateTime,
                        allDay : event.IsAllDayEvent};
            });
            this.events = JSON.parse(JSON.stringify(events));
             
            if(!this.eventsRendered){
                const ele = this.template.querySelector("div.fullcalendarjs");
                $(ele).fullCalendar('renderEvents', this.events, true);  <---says this is bad
                this.eventsRendered = true;
            }
        }


   renderedCallback() {
      if (this.fullCalendarJsInitialised) {
         return;
      }
      this.fullCalendarJsInitialised = true;

        Promise.all([
            loadScript(this, FullCalendarJS + "/FullCalendarJS/jquery.min.js"),
            loadScript(this, FullCalendarJS + "/FullCalendarJS/moment.min.js"),
            loadScript(this, FullCalendarJS + "/FullCalendarJS/fullcalendar.min.js"),
            loadStyle(this, FullCalendarJS + "/FullCalendarJS/fullcalendar.min.css"),
        ])
        .then(() => {
            //initialize the full calendar
        this.initialiseFullCalendarJs();
        })
        .catch((error) => {
        console.error({
            message: "Error occured on FullCalendarJS",
            error,
        });
        });
   }

Sometimes the calendar loads fine other times it gives me the "$() is not a function". Now $() is a jquery thing. It seems to work if i wait a second before clicking the button but knowing the users they don't want to wait. So how to i make it so prior to anything happening is loads the static resources first?

additional information; this is being called from a parent Aura component which is a quick action button on a record page. It passes the recordId to the lwc via @api.

Answer 1

The order of wire and Loadscript is not fixed, so you need to check if both data and the scripts are loaded before you init the Full Calendar.

So put your code in a method and add checks for both.

doSomething(){
    if(this.events && this.fullCalendarJsInitialised){
        //initialize the full calendar
        this.initialiseFullCalendarJs();

        if(!this.eventsRendered){
            const ele = this.template.querySelector("div.fullcalendarjs");
            $(ele).fullCalendar('renderEvents', this.events, true);
            this.eventsRendered = true;
        }
    }
}

Call the method doSomething from both a wired method and success of Loadscripts in renderedCallback.

@wire(fetchEvents,  {usrId: '$userId'})
eventObj(value){
    this.eventOriginalData = value; 

    let {data, error} = value;
    if(data){
        let events = data.map(event => {
            return { id : event.Id, 
                    title : event.Subject, 
                    start : event.StartDateTime,
                    end : event.EndDateTime,
                    allDay : event.IsAllDayEvent};
        });
        this.events = JSON.parse(JSON.stringify(events));
         
        this.doSomething();
    }
}


renderedCallback() {
    if (this.fullCalendarJsInitialised) {
        return;
    }
    this.fullCalendarJsInitialised = true;

    Promise.all([
        loadScript(this, FullCalendarJS + "/FullCalendarJS/jquery.min.js"),
        loadScript(this, FullCalendarJS + "/FullCalendarJS/moment.min.js"),
        loadScript(this, FullCalendarJS + "/FullCalendarJS/fullcalendar.min.js"),
        loadStyle(this, FullCalendarJS + "/FullCalendarJS/fullcalendar.min.css"),
    ])
    .then(() => {
        this.doSomething();
    })
    .catch((error) => {
        console.error({
            message: "Error occured on FullCalendarJS",
            error,
        });
    });
}