1

Havent been able to reconcile this challenge to the docs :/ Hoping someone can point out to me why when this lwc renders (successfully) and it receives an event via its empApi subscription it throws a 'handleGoNext is not defined' runtime error. I appreciate the function is not visible, but I'm not able to construct things such that a resulting function call is able to be made successfully. Calling this.handleGoNext() doesnt work either. Any pointers would be most appreciated!

handleGoNext(){
    // *** this is the logic Im hoping to call ***
};


// Initializes the component
connectedCallback() {
   if(this.subscription = {}){ 
        
        // Callback invoked whenever a new event message is received
        
        const messageCallback = function (response) {
            handleGoNext(); // *** THIS IS THE CALL THAT BREAKS THINGS ***
        };
        
        // Invoke subscribe method of empApi. Pass reference to messageCallback
        subscribe(this.channelName, -1, messageCallback).then((response) => {
            // Response contains the subscription information on subscribe call
            console.log(
                'Subscription request sent to: ',
                JSON.stringify(response.channel)
            );
            this.subscription = response;
        });
    }
}
user1517566
  • 348
  • 1
  • 3
  • 14

1 Answers1

1

what happens when you do subscribe(this.channelName, -1, this.handleGoNext)?

Here's my function from around Easter time, didn't check recently if it still works.


isSubscribed = false;
subscription = {};
replayId;

@track data = [];

subscribe(id) {
        const handleMessage = (response) => {
            let val = Object.assign({}, response.data.event, response.data.payload);
            this.replayId = Math.max(this.replayId ?? 0, val.replayId);

            /*  do not use this.data.push(val);
                it doesn't play well with datatable. Use the spread operator or JSON.parse/JSON.stringify trick.
                Plus we want new rows to be added on top of the list.`
            */
            this.data = [val, ...this.data];
        };

        subscribe(this.channel, id, handleMessage).then((response) => {
            this.subscription = response;
            this.isSubscribed = true;
        });
    }
eyescream
  • 18,088
  • 2
  • 34
  • 46
  • Thanks for your suggestion and snippet. Unfortunately, as soon as I declare any kind of a callback function Im not able to access any imported capabilities ie. flow nav -- they're all considered 'not a function'. so, when I receive an inbound platform event notification I am not able to react to it from a typical handler function... very frustrating challenge! – user1517566 Nov 29 '22 at 21:51
  • Isn't that because declaring a real `function` changes `this` to point to something inside function's body? If you try mine with arrow function does it work better? I mean I could access component's "this" for variables so I'd expect methods to be visible too – eyescream Nov 29 '22 at 23:43
  • 1
    You are totally correct. I didn't appreciate the nuance of the function vs (response) syntax -- once I modified to your proposed approach then as you predicted everything worked. You keep getting me out of these holes sir - thank you! – user1517566 Nov 29 '22 at 23:53
  • You young kids with your fancy arrow functions! Back in my days we had to walk to school uphill (bith ways), pass "this" we wanted to function, often called the parameter "_this" or "self", you could Google around a bit. ;) Have you seen https://trailhead.salesforce.com/content/learn/modules/modern-javascript-development/understand-javascript-functions and whole course of 6 modules? Might be beneficial to click through it. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this is fun too – eyescream Nov 30 '22 at 07:13
  • I hadnt seen the trail but will go through it. My out of date javascript has caught me out... thanks again for the help. Its sincerely appreciated. – user1517566 Dec 01 '22 at 09:54