Problem with LWC that displays a list of Accounts that re-orders in real-time based on their LastModifiedDate (without webpage refresh)

Question

What I'm trying to do: Display a list of Account records where the order of the accounts updates dynamically in real-time (in a LWC - it doesn't have to be but I think this is the best way to do this) when their LastModifedDates change.

My Problem: The LWC I've created displays my 2 test accounts in a basic list but this list updates to show the accounts in a different order only when I refresh the whole webpage. So it's not dynamic and "moving" the accounts up and down in real-time which is what I'm trying to achieve.

What I've already done: I've checked that CDC is enabled. I've added Account to the list of objects where CDC is enabled. I've created a custom LWC that should be subscribing to the AccountChangeEvent. The LWC displays on a Lightning App Page and I can see a list of 2 accounts in order of which was most recently modified. This list updates to show the accounts in a different order only when I refresh the whole webpage. I test this by splitting my screen between the Sales Console and editing the accounts in the UI with my LWC in its Lightning App Page in the other window. I edit the records then click into the other window just to be active in there in case that helps but they don't change order until I refresh the whole page.

My Code:

accountList.js

import { LightningElement, wire, track } from 'lwc';
import { subscribe, onError } from 'lightning/empApi';
import getAccounts from '@salesforce/apex/AccountListController.getAccounts';

export default class AccountList extends LightningElement {
    @track accounts;
    columns = [
        { label: 'Account Name', fieldName: 'Name' },
        { label: 'Last Modified Date', fieldName: 'LastModifiedDate', type: 'date' }
    ];
    channelName = '/data/AccountChangeEvent';
    subscription = {};

    @wire(getAccounts)
    wiredAccounts({ error, data }) {
        if (data) {
            this.accounts = data;
            console.log('Accounts fetched successfully:', data);
        } else if (error) {
            console.error('Error fetching accounts:', error);
        }
    }

    connectedCallback() {
        this.handleSubscribe();
    }

    handleSubscribe() {
        const messageCallback = (response) => {
            console.log('Received Streaming API event:', response);
            this.refreshAccounts();
        };

        subscribe(this.channelName, -1, messageCallback).then(response => {
            this.subscription = response;
            console.log('Subscribed to channel:', response.channel);
        }).catch(error => {
            console.error('Error subscribing to channel:', error);
        });

        onError(error => {
            console.error('Streaming API error:', error);
        });
    }

    refreshAccounts() {
        getAccounts()
            .then(data => {
                this.accounts = data;
                console.log('Accounts refreshed:', data);
            })
            .catch(error => {
                console.error('Error refreshing accounts:', error);
            });
    }
}

accountList.js-meta.xml:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>Account List LWC</masterLabel>
    <apiVersion>60.0</apiVersion>
    <description>Used to display a list of account records by their LastModifiedDate like a list view but where the records will move up and down the list dynamically in real-time as they're edited.</description>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

AccountListController Apex Controller:

public with sharing class AccountListController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        return [SELECT Id, Name, LastModifiedDate FROM Account ORDER BY LastModifiedDate DESC LIMIT 10];
    }
}

I'm really excited about the possibilities of LWCs and really want to upskill on using them but I have to be honest that I'm struggling to get my head around concepts in javascript that are probably quite basic. Whoever you are out there, if you write LWCs regularly, you will know tons more than me so your ideas will be gratefully received lol. Hopefully I've left out something basic in my code and someone can point it out.

Thanks for reading everybody. Anything else you need in order to point me in the right direction just let me know.

Answer 1

Your problem is that you use a wire, which requires the Apex to be cacheable. Because it is cachable, it isn't called every time but instead a client-side cache is used for a period of time.

Make the Apex method non-cachable and switch to using an imperative call.

See the documentation for more details on how to make an imperative call.