LWC Apex data not getting the latest data from backend in SF Communities

Question

I suppose there are two pages in Communities namely, Page A and Page B. Page A has an LWC component which has @wire method. This wire method gets the Account details of the particular user. The wire method is as follows:

        @wire(getAccountOfUser, {userId: '$userId'})
        wiredAccount(result)  {
            this.accountData = result;
            const {data,error} = result;
            if(data)    {
                this.acct = JSON.parse(data);
                this.error = undefined
             else if(error)  {
                this.acct = undefined;
                this.error = error; 
}

When I go from Page A to Page B and if there is an update in Account details, the account details are getting updated in the back-end. Whereas, if i come back to page A, the above wire method is not fetching the updated Account details and getting the data that was there before updating. What should I have to do? I have tried refreshing apex in page reference and also in the connected callback. None of them seems to work. It's working well when i put refresh apex in the rendered callback and I don't like refreshing Apex in the rendered callback.

Is there any specific reason why this is happening? Or is there any workaround to get the latest account details data whenever the page is getting loaded?

Answer 1

Communities are implemented as Single Page Applications, so all the "pages" are actually rendered as one and are simply switched between by the view management within it.

LWC wires leverage client-side caching (which is why the Apex they connect to must be cacheable).

Put these two things together and what you are seeing is that "page A" calls your Apex and the LWC infrastructure caches the result. If you then navigate to "page B" and back to A before the cache has expired the cache is used to present your data again and you don't see the up-to-date data.

There are basically three solutions here:

1. Switch from using a wire to using imperative Apex that is not marked as cacheable.
2. Use the refreshApex method in the LWC to clear the cache in the client before rendering (not really the right approach since this is basically a hack).
3. Leverage the uiRecordApi instead of custom Apex if possible; this means any changes to the record in one context get reflected automatically in any other context that same record is presented since each shares the same cached record(s).

See more in the documentation.