Cache issue in custom application on Salesforce 1 mobile app

Question

Actually, I am working on lightning web components and creating a custom application on Salesforce 1 app for mobile. I am creating custom front end on LWC and custom back-end. On first screen, I have a custom record view and when I click on edit button, an edit form opens with auto-populated input fields in which we can edit/change value of any field. After changing any field's value and clicking on save, it updates the value in Database as well as on my record view screen.

The issue is when I open the edit form and change any value and instead of save, I cancel it. Then I again go on edit form the auto filled fields show those values that I have changed, not those values that are saved in Database (I am retrieving values from database through @wire). The issue I noticed is that 2nd time the app loads the edit form from LDS cache not from Database. Is there any solution of this problem? When I reopen the edit form, so it loads data from Database not from cache.

Answer 1

I have faced similar kind of issue in LWC like even data is updated in the database, the component would show the data from the cache. To overcome this I called refreshapex method after saving the record.

In your case, you can call the refreshapex when cancel button is clicked.

See the example.

// opportunitiesOverAmount.js
import { LightningElement, api, wire } from 'lwc';
import { refreshApex } from '@salesforce/apex';
import getOpptyOverAmount from '@salesforce/apex/OpptiesOverAmountApex.getOpptyOverAmount';
import updateOpptyStage from '@salesforce/apex/OpptiesOverAmountApex.updateOpptyStage';

export default class OpportunitiesOverAmount extends LightningElement {
    @api amount = 500000;

    @wire(getOpptyOverAmount, { amount: '$amount' })
    opptiesOverAmount;

    handleClick(e) {
        updateOpptyStage({
            amount: this.amount,
            stage: 'Closed Won'
        })
        .then(() => {
            return refreshApex(this.opptiesOverAmount);
        })
        .catch((error) => {
            this.message = 'Error received: code' + error.errorCode + ', ' +
                'message ' + error.body.message;
        });
    }
}

If you are using the imperative method:

import { LightningElement, api, wire } from 'lwc';
import { refreshApex } from '@salesforce/apex';
import getActivityHistory from '@salesforce/apex/GalleryApexController.getActivityHistory';

export default class GalleryApexMaster extends LightningElement {
    @api recordId;
    wiredActivities;

    @wire(getActivityHistory, { accountId: '$recordId', max: '500' })
    wiredGetActivityHistory(value) {
        // Hold on to the provisioned value so we can refresh it later.
        this.wiredActivities = value; // track the provisioned value
        const { data, error } = value; // destructure the provisioned value
        if (data) { ... }
        else if (error) { ... }
        ...
    }

    handleLogACall() {
        // Use the value to refresh wiredGetActivityHistory().
        return refreshApex(this.wiredActivities);
    }
}

Here you can find more info on refresh apex.