Force refresh view in LWC

  • In Aura, we can do

        $A.get('e.force:refreshView').fire();
    

    to cause standard components to update.

    How can we do an equivalent in LWC because sfdx refuses to publish .js code with $A in it saying the usage is disallowed in LWC?

    For now i tricked it with

    eval("$A.get('e.force:refreshView').fire();");
    

    but that is obviously less than ideal....

    What is your use case, as when do you want to refresh the view, viz., editing or deleting a record? Are you using standard LDS or `@wire` decorators, or you are using custom apex methods?

    @JayantDas i have my component that creates related records of user's drag-n-drop actions; on the same page layout i have a related list (standard LWC component provided by SalesForce). I want related list to refresh when the user interacts with my component.

    Standard LWC related list? Do you mean the standard related list component in LEX? While the approach you have may work, but an ideal way for this would be to wrap your LWC in an Aura Component, utilize events for communication and let the Aura Component refresh the view.

    @JayantDas yes i do mean the standard related list component in Lightning Experience. Having an Aura wrapper just to do refresh seems a bit backwards. I would've thought that the platform provided some interop functionality for actually talking to other components on the page :/

    Wrapping it within Aura is kind of interop here. Unfortunately there’s no direct 1-1 replacement for quite a few Aura features at least at this point of time.

  • sviereckl

    sviereckl Correct answer

    one year ago

    I was able to find an answer on the Developer Docs forum for a work-around. I was surprised how challenging it was to find a solution in the Salesforce LWC docs, so I'm not sure if this is the recommended approach, but it's the best I've been able to find!

    You will need to import the updateRecord method from the lightning/uiRecordApi. Then, you can call this updateRecord() function in your lwc javascript file whenever you want your detail record page (i.e. Account Detail Page) to refresh.

    In the following example, I have a lwc that lives on my lightning detail page on the Account record (i.e. as a side-bar component). In the example, my lwc calls a handleClick method that imperatively calls an updateAccount() method in my Apex Controller Class. In the callback method, I update the Account Detail record using the updateRecord() function.

    Import Statement:

    import { updateRecord } from 'lightning/uiRecordApi';

    Function:

    updateRecord({ fields: { Id: this.recordId } });

    Example:

    import { LightningElement, api, track, wire } from 'lwc';
    import { updateRecord } from 'lightning/uiRecordApi';
    import updateAccount from '@salesforce/apex/ApexControllerClass.updateAccount;
    
    export default class lightning-web-component-example extends LightningElement {
    
         @api recordId;
    
         handleClick(){
    
              // Call Apex Method imperatively to update Account record
              updateAccount({accountId: this.recordId})
                   .this( result => {
              
                        if (result) {
                             // Refresh Account Detail Page
                             updateRecord({fields: this.recordId})
                        }
    
                   })
         }
    }
    

    Note: this is performing an actual DML operation on the record, not just "updating" the local client. This will mark the record as "Last Modified By" the viewer, which may not be ideal.

    Received and error: Invalid recordInput when trying to follow this approach

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM