4

I have a Community page called page_A and a LWC is on this page. The HTML file has these two parts where {flag} is a tracked variable in js file.

<template if:true={flag}>     
... A part ...                                                                                                 
</template>                               

<template if:false={flag}>   
... B part ...                         
</template> 

In the js file there is a @wire Apex method called "getFlag" that returns {flag} value.

@wire (getFlag)
wiredGetFlag({error,data}){
    if (data) {
        this.flag = data.flag;
    } else if (error) {

    }
} 

Suppose flag is true now and "A part" is shown. After doing something in another component in another page, I want to navigate back to "A_page" to see that flag is now turned to "false" and "B part" is shown.

this[NavigationMixin.Navigate]({
  type: 'standard__namedPage',
    attributes: {
     pageName: 'page_A',
    },
});

It turns out that after navigating back to page_A, the value would not be updated. Only if I press F5 to reload the page would the @wired function be run again so that I can see flag value turned "false".

Any idea how I can reload the page in SFDC community using NavigationMixin.Navigate without pressing F5 by hand?

Thanks.

1
  • Does your Apex method use Cachable? You can call this method imperatively in connected callback and that should do the trick.
    – ytiq
    Dec 27, 2019 at 11:46

2 Answers 2

3

Using refreshApex()

Since you are using a wired function, you can invoke refreshApex() to refresh the component's data when the component is loaded (i.e. in connectedCallback()), rather than pulling data from the cache.

Using the code that you provided, the module with the wired function would become:

// IMPORTANT - remember to import the function
import { refreshApex } from '@salesforce/apex';

...

@track flag = {};

// Introduce property to track the wired result to refresh later
wiredFlag;

@wire (getFlag)
wiredGetFlag(result){
    this.wiredFlag = result;

    // Destructure result into two variables: data and error
    const { data, error } = result;

    if (data) {
        this.flag = data.flag;
    } else if (error) {

    }
}

connectedCallback() {
    // Refresh the data on load
    if (this.wiredFlag && this.wiredFlag.data) {
        refreshApex(this.wiredFlag);
    }
}

Note: you cannot refresh data that has been fetched imperatively using refreshApex() since it was never cached, as per documentation https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.apex


If you do not need to handle the wired function error in JS, you can simplify the module:

JS

import { refreshApex } from '@salesforce/apex';

...

@wire (getflag) flag;

connectedCallback() {
    if (this.flag && this.flag.data) {
        refreshApex(this.flag);
    }
}

HTML

<template>
    <template if:true={flag.data}>{flag.data.flag}</template>
    <template if:true={flag.error}>{flag.error}</template>
</template>
2
  • Hi @akiradev, thank you so much for your answer. I gave it a try but it was in vain. I think what is needed is that I need to be able to run "/@wire (getFlag) wiredGetFlag" again without refreshing the page. I finally did it by using hyperlink "<a href" from another page so that it will surely refresh the page and run "/@wire (getFlag) wiredGetFlag" on loading. It is just a workaround and might not be the best way though. Feb 17, 2020 at 9:07
  • Is there any proper solution found for this issue?
    – byadav
    Feb 6, 2021 at 9:21
0

you can use eval JavaScript function to refresh the page from the component . copy and paste the below code after the line from where you wanted to refresh the page.

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .