TransWikia.com

LWC pub sub : subscribing component fetching stale data from apex

Salesforce Asked by Gourav on December 8, 2020

I am having two separate LWC components on the App Page. One is for adding Team members(Call it A ‘members-skills’) and other for showing all the team members(Call it B ‘Team list’).

Current requirement is : When form is filled in A component and Sumbit is pressed then B component should refresh and fetch all the data including new data from data base.
I have included Pub/sub Model and called the apex imperatively.

On Debugging found that subscriber method is called correctly but new data is not fetched in this.

Member skill component

import { LightningElement,wire } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import team_member from '@salesforce/schema/team_member__c';
import NAME_FIELD from '@salesforce/schema/team_member__c.Name';
import team_FIELD from '@salesforce/schema/team_member__c.team__c';
import skills_FIELD from '@salesforce/schema/team_member__c.Skills__c';
import { publish, MessageContext } from 'lightning/messageService';
import SAMPLEMC from '@salesforce/messageChannel/SampleMessageChannel__c';

export default class MemberSkills extends LightningElement {
    teamMemberObject = team_member;
    myFields = [NAME_FIELD, team_FIELD,skills_FIELD];
    @wire(MessageContext)
    messageContext;

    handleTeamMemberCreated(){
        const evt = new ShowToastEvent({
            title: "Team member created",
            message: "Record has been created successfully",
            variant: "success"
        });
        
        const inputFields = this.template.querySelectorAll(
            'lightning-input-field'
        );
        if (inputFields) {
            inputFields.forEach(field => {
                field.reset();
            });
        }
        const message = {
            datacreated: 'data created'
        };
        publish(this.messageContext, SAMPLEMC, message);
        this.dispatchEvent(evt);
    }
}

Team member component

import { LightningElement,wire } from 'lwc';
import searchTeamMembers from '@salesforce/apex/teamListController.searchTeamMembers';
import { subscribe, unsubscribe, MessageContext,APPLICATION_SCOPE } from 'lightning/messageService';
import SAMPLEMC from '@salesforce/messageChannel/SampleMessageChannel__c';

export default class TeamList extends LightningElement {
    teammembers;
    subscription = null;
    searchTerm = '';
    @wire(MessageContext)
    messageContext;
    /*@wire(searchTeamMembers, {searchTerm: '$searchTerm'})
    loadBears(result) {
    this.teammembers = result;
    console.log(result);
        /*if (result.data) {
            const message = {
                bears: result.data
            };
            
        }*
    }*/

    

    callapexMethod(searchTerm){
        searchTeamMembers({ searchTerm: searchTerm })
            .then((result) => {
                this.teammembers = result;
                this.error = undefined;
            })
            .catch((error) => {
                this.error = error;
                console.log(error);
                this.teammembers = undefined;
            });
    }

    handleMessage(message) {
        console.log('subscriber call');
        this.callapexMethod('');
    }

    subscribeToMessageChannel() {
        if (!this.subscription) {
            this.subscription = subscribe(
                this.messageContext,
                SAMPLEMC,
                (message) => this.callapexMethod(''),
                {scope: APPLICATION_SCOPE}
            );
        }
    }

    connectedCallback() {
        this.subscribeToMessageChannel();
        this.callapexMethod('');    
    }

    handleSearchTermChange(event) {
        // Debouncing this method: do not update the reactive property as
        // long as this function is being called within a delay of 300 ms.
        // This is to avoid a very large number of Apex method calls.
        window.clearTimeout(this.delayTimeout);
        const searchTerm = event.target.value;
        // eslint-disable-next-line @lwc/lwc/no-async-operation
        this.delayTimeout = setTimeout(() => {
            this.searchTerm = searchTerm;
            this.callapexMethod(this.searchTerm);
        }, 300);
    }
    get hasResults() {
        return (this.teammembers.length > 0);
    }
}

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP