0

So, I have a lwc component, that is accessed via related list. When I enter the record page, and navigate to the lwc, everything works fine. Then, if I do something on that lwc, save and navigate back to the record page (via navigation mixin) and then, go back to the lwc, it loads the last thing I saw before saving, with the old values, and does not refresh it. Is there a way to force the lwc component to refresh everytime I navigate to it? I understand refreshing the whole page is not good for the user experience. Is there a formal way Salesforce provides?

EDIT: I forgot to mention, my LWC is wrapped around an url addressable aura component. I found this in the query parameters documentation:

"If your component uses the lightning:hasPageReference or lightning:isUrlAddressable interfaces, always implement a change handler. When the target of a navigation action maps to the same component, the routing container might simply update the pageReference attribute value instead of recreating the component. In this scenario, a change handler ensures that your component reacts correctly." does that have something to do with it?

1 Answer 1

0

Components that are loaded are cached when you use NavigationMixin. So, when you navigate to different page from custom component, the current state of you component is stored in cache and the next time you navigate back would render the stored instance. Also, connectedCallback would be called only the first time you navigate to that component.

To overcome this problem you can use some design pattern that would know when URL is changed (change handler in Aura).

In LWC, you can use CurrentPageReference. You can use design outlined in this document. In particular, observe the below two methods:

@wire(CurrentPageReference)
setCurrentPageReference(currentPageReference) {
    this.currentPageReference = currentPageReference;

    if (this.connected) {
        // We need to have the currentPageReference, and to be connected before
        // we can use NavigationMixin
        this.generateUrls();
    } else {
        // NavigationMixin doesn't work before connectedCallback, so if we have 
        // the currentPageReference, but haven't connected yet, queue it up
        this.generateUrlOnConnected = true;
    }
}

.......
.......
.......

connectedCallback() {
    this.connected = true;
    
    // If the CurrentPageReference returned before this component was connected,
    // we can use NavigationMixin to generate the URLs
    if (this.generateUrlOnConnected) {
        this.generateUrls();
    }
}

Notice how the checks generateUrlOnConnected and connected are used to trigger method this.generateUrls(). You would need to do something like this to update the current state whenever you navigate back to your LWC component.

Note: Although you can implement change handler in Aura, it is recommended to implement such design pattern in LWC as it would be useful when you completely migrate to LWC.

3
  • Thank you for the information! I do not understand it completely though. I get that implementing this allows me to know if I am loading the component for the first time or not. But, how do I refresh it? Is that what I must do in the "generateUrls" method? Or is that just the example of the documentation and I just need to add my logic instead? Thanks again. Nov 15, 2021 at 14:40
  • @joacoiudica this is only a design pattern, you should be implementing your own logic instead of generateUrls. Also as there is no code that you posted, it is not possible to exactly say what to do in your code. Nov 15, 2021 at 16:42
  • 1
    yes, sorry if my question is a little obvious, it is my first time implementing this. I just needed to reset the state of the component, so instead of generating urls, I implemented a reset() function that sets all my important properties to the default value. Thanks for the tip! Nov 15, 2021 at 16:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.