[SalesForce] LWC: Chained property not refreshing

I chained two wires to get a sales rep’s name, but the name does not refresh.
This Lightning Web Component displays account information.
Account has a User lookup field called Sales_Representative__c.
I found Salesforce would not let me import Sales_Representative__r.Name or Sales_Representative__c.Name, so I created a separate chained @wire to look it up.

The problem is that the sales rep’s name does not refresh when the name is changed in another window.

Question1: How come this doesn’t refresh? Tested in Chrome and Safari.

Question 2: What is the best way to imperatively look up the user's name for example within the accountWire function?

When the sales rep is changed, the salesrepid also does not change, so the first wire is not refreshing.

EDIT:
As @akiradev pointed out, the import does work after all so I do not need a second wire.
However, the Sales Representative field in the LWC still does not automatically update onscreen when I change the Sales Representative from the account's record page in another window.

Changes made to the Javascript (not shown below):

+ import ACCOUNT_SALESREPNAME_FIELD from '@salesforce/schema/Account.Sales_Representative__r.Name';

  @wire(getRecord, {
        fields: [
            ...
+           ACCOUNT_SALESREPNAME_FIELD
        ] 
    }) wiredAccount({ error, data }) {
        if (error) {...}
        else if (data) {
            ...
+           this.salesrepresentative = getFieldValue(data, ACCOUNT_SALESREPNAME_FIELD);
            ...
        }
        else {} // wiredAccount

... and commented out the @wire to get the USER_NAME_FIELD

Javascript:

import {LightningElement, api, wire, track} from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
import ACCOUNT_SALESREPRESENTATIVE_FIELD from '@salesforce/schema/Account.Sales_Representative__c';
import USER_NAME_FIELD from '@salesforce/schema/User.Name';

export default class myClass extends LightningElement {
    @api c__recordId; // Get from parent Aura lightning component which is an URL button
    @api recordid;
    @api acctname = '-';
    @api salesrepresentative = '-';
    @api message = '';
    @api salesrepid;
    
    @wire(getRecord, {
        recordId: '$c__recordId',
        fields: [
            ACCOUNT_NAME_FIELD,
            ACCOUNT_SALESREPRESENTATIVE_FIELD,
        ] 
    }) wiredAccount({ error, data }) {
        if (error) {
            this.error = error;
            console.log(error);
        }
        else if (data) {
            this.data = data;
            this.acctname = data.fields.Name.value;
            this.salesrepid = getFieldValue(data, ACCOUNT_SALESREPRESENTATIVE_FIELD);
        }
        else {
            console.log('wiredAccount: Both data and error were undefined');
        }
    } // wiredAccount

    // Get sales representative user name. When salesrepid updates, this is triggered
    @wire(getRecord, {
        recordId: '$salesrepid',
        fields: [
            USER_NAME_FIELD,
        ]
    }) wiredUser({ error, data }) {
        if (error) {
            console.log('wiredUser error: ' + error);
        }
        else if (data) {
            this.salesrepresentative = getFieldValue(data, USER_NAME_FIELD);
        }
        else {
            console.log('wiredUser: Both data and error were undefined');
        }
    };

}

HTML (removed other LWC panels)

<template>
    <div class="slds-grid slds-gutters_x-small" style="height:95%; width:100%">
        <div class="slds-col slds-size_4-of-12">

<lightning-card title="WIRED Institution Summary" icon-name="standard:account">
    <div class="slds-var-m-around_medium">
            <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_1-of-1">
                <span class="slds-form-element__label">Institution Name</span>
                <p>{acctname}</p>
            </div>  
            <div class="slds-col slds-size_1-of-1”>
                <span class="slds-form-element__label">Sales Representative</span>
                <p>{salesrepresentative} ({salesrepid})</p>
            </div>
        </div>
    </div>
</lightning-card>

        </div>
    </div>
</template>

Best Answer

There are two parts to this problem:

  1. Refreshing wired data in the LWC module
  2. Triggering the refresh from an external action/event

Part 1: Refreshing wired data in the LWC module

The data retrieved by a wired service in LWC will not update automatically unless one or more of its arguments change. If arguments are unchanged during the lifecycle of the module, a wired property can be refreshed with the latest data by calling refreshApex() on it.

// ... other imports
import { refreshApex } from '@salesforce/apex';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

// Wired account property
@wire(getRecord, { 
    recordId: '$c__recordId', 
    fields: [
        ACCOUNT_NAME_FIELD, 
        ACCOUNT_SALESREPRESENTATIVE_FIELD
    ]
}) account;

// Getters for the account field values
get accountSalesRep() {
    return getFieldValue(this.account.data, ACCOUNT_SALESREPRESENTATIVE_FIELD);
}

// A method to call to refresh the wired account
// Call this to fetch the data again
handleRefresh() {
    refreshApex(this.account);
}

Part 2: Triggering the refresh from an external event

As you mentioned in a comment that you are updating a record in a separate window to the one the LWC module exists, the module will need to listen and react to an event.

You can use empApi and Change Data Capture to publish events and subscribe to those events inside your module. Subscribe to the event and call handleRefresh() in the callback.

Side note: This might be overkill - Look at how your users interacts with the system to see if it is necessary to keep data synchronised between windows. If the scope is reduced to keeping data synchronised within a record page, you can use something like Lightning Data Service (Record Change) in your parent aura component which in turn calls @api handleRefresh() in the nested LWC module to keep the account data fresh.

Related Topic