Lightning web component causing refresh loop

Question

I'm building a simple LWC with an iframe to an external messaging app. When I deploy my code as is, it causes Salesforce to refresh over and over. Not sure where I'm going wrong here. I've isolated my problem to the js file:

JavaScript:

import { LightningElement, api, track, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import MemberMessagingHandlerClass from '@salesforce/apex/MemberMessagingHandler.MemberMessagingHandlerClass';

export default class TulaMessageComponent extends LightningElement {
   @api recordId
   @track messageURL

   @wire(MemberMessagingHandlerClass, {AccountRecId: '$recordId'})
   MessageData(data){ 
       if(data){        
           console.log('Data ### ',data);
           this.messageURL = data;
       }else {
           console.log('URL not found');
       }
   }
}

HTML:

<template>
    <lightning-card variant="Narrow" title="Member Messaging:" icon-name="standard:messaging_conversation" height="600px">
        <iframe src={messageURL} width="100%" height="600px"></iframe>
    </lightning-card>
</template>

Answer 1

You have your structure wrong, it seems. Your wire doesn't return the data, but rather a response which itself has a data attribute. Renaming would help clarify things, and then you need to figure out the proper truthiness checks. Likely as follows:

@wire(MemberMessagingHandlerClass, {AccountRecId: '$recordId'})
messageData(response) {
   if(response.data){
       this.messageURL = response.data;
    } else {
        if (response.error) {
            // error handling logic
        }
    }
}