Problems with wire decorator

Question

I'm having problems to understand why the first wire is not retrieving data

I've been trying to keep this URL component in the .html as it was before my changes, so now instead of the value holding a single URL, it would retrieve a different url depending on the current campaign recordtype.

<p>Click the <u><lightning-formatted-url value={viewClientsURL} label={label.ReportLabel} target="_blank"></lightning-formatted-url></u> {label.ReportDesc}</p>

This is my .js

 @api get campId() {
    return this._campId;
  }
  set campId(campId) {
    this._campId = campId;
    this.ViewClientsURL = (this.eventsRecordTypeId === this.currentCampaignRecordType)? this.label.ViewClientsURL_Event + campId : (this.otherMarketingRecordTypeId === this.currentCampaignRecordType)?this.label.ViewClientsURL_Other + campId:this.label.ViewClientsURL + campId;

    /*
    this.viewClientsURL = this.label.ViewClientsURL + campId;//Before
    */
  }

  
  @wire(getObjectInfo, { objectApiName: CAMPAIGN_OBJECT })
  campaignInfo;

  get eventsRecordTypeId() {
    const rtis = this.campaignInfo.data.recordTypeInfos;
    return Object.keys(rtis).find(rti => rtis[rti].name === 'Event Campaign');
  }
  
  @wire(getRecord, { recordId: "$campId", fields: [CAMPAIGN_CALNOMINFO, CAL_FORM_END_DATE, CAMPAIGN_NAME, CAMPAIGN_RECORDTYPEID] })
  campaign;

  get currentCampaignRecordType(){
    return getFieldValue(this.campaign.data, CAMPAIGN_RECORDTYPEID);
  }

This is the error that I'm getting when I open the formatted link

It's not detecting the data of campaignInfo that should be stored trough the @wire and it's breaking when I try to assign this.ViewClientsURL value conditionally trough this.eventsRecordTypeId, so it fails on set campId(). Are my thoughts right or is it something even more obvious?

Answer 1

Data from wire methods will not be available until at least one render cycle. That's how LWCs work. As such, you definitely must make sure that data is not null:

get eventsRecordTypeId() {
  if(this.campaignInfo?.data) {
    const rtis = this.campaignInfo.data.recordTypeInfos;
    return Object.keys(rtis).find(rti => rtis[rti].name === 'Event Campaign');
  }
  return null;
}

Answer 2

It might be that you need to add a null check on the getter as the first call to the wire method might be bringing back a null value and the getter might be failing because its trying to do dot notation into a null value. Start by wrapping the logic in the getter like so

   if(this.campaignInfo != null){
       const rtis = this.campaignInfo.data.recordTypeInfos;
       return Object.keys(rtis).find(rti => rtis[rti].name === 'Event Campaign');
   }

If that doesn't work I would check the getObjectInfo method to figure out why no data is being passed into the campaignInfo variable