Why Isn’t My LWC Refreshing on an LWR Page?

Question

I am trying to refresh my Lightning Web Component (LWC) on an LWR (Lightning Web Runtime) Page in Experience Cloud after a record save. I have tried using refreshApex and RefreshEvent, but neither approach updates the component as expected. The toast notification appears, and the onClose method executes, yet the component does not reflect the updated data. Why is this happening, and how can I fix it?

Answer

The issue occurs because refreshApex requires the entire wire response object, not just the data property. If you destructure the response immediately and store only data, refreshApex will not work since it needs the full response object from the wire function. The correct approach is to save the entire result and then extract data separately.

Here’s the incorrect implementation where only data is stored:

wiredResult;
@wire(getUserDetails)
userRecord({ error, data }) {
    if (data) {
         this.wiredResult = data; // ❌ Incorrect, storing only data
         this.getWorkOrderAssignedToVendor(this.vendorAccountId);
    }
}

Instead, you should store the entire response object and extract data separately:

wiredResult;
@wire(getUserDetails)
userRecord(result) {
    this.wiredResult = result; // ✅ Correct, storing the full response object
    const { error, data } = result; // Extract properties
    if (data) {
         this.getWorkOrderAssignedToVendor(this.vendorAccountId);
    } else if (error) {
         // Handle the error
    }
}

Now, calling refreshApex(this.wiredResult) will work correctly:

refreshPage() {
    Toast.show({
        label: 'Quote has been created successfully',
        message: 'You can view the quote details in the Quotes tab.',
        mode: 'dismissable',
        variant: 'success',
        onclose: async () => {
            console.log('Toast is closed');
            return refreshApex(this.wiredResult); // ✅ Now it works!
        }
    }, this);
}

The refreshPage function displays a toast notification to inform the user that a quote has been successfully created. It uses the Toast.show method to display a message with a dismissable mode and a success variant. The key aspect of this implementation is the onclose callback, which executes when the user dismisses the toast. Inside this callback, the function logs "Toast is closed" to the console and then calls refreshApex(this.wiredResult). This ensures that the component fetches the latest data after the toast is dismissed.

The crucial point here is that refreshApex requires the entire wire response object (this.wiredResult), not just its data property. If only data were stored, refreshApex would not function correctly. By passing the complete wire result, Salesforce knows which data to refresh, ensuring the LWC updates with the latest information. The use of async () => in the onclose callback allows refreshApex to return a promise, ensuring proper execution flow.

If you are using RefreshEvent and it does not work on an LWR page, it is because LWR pages use a different rendering mechanism than standard Lightning pages. A reliable workaround is to manually fetch the updated data instead of relying on RefreshEvent:

refreshPage() {
    Toast.show({
        label: 'Quote has been created successfully',
        message: 'You can view the quote details in the Quotes tab.',
        mode: 'dismissable',
        variant: 'success',
        onclose: () => {
            console.log('Toast is closed');
            this.getWorkOrderAssignedToVendor(this.vendorAccountId); // ✅ Manually refetch data
        }
    }, this);
}

The refreshPage function is responsible for displaying a toast notification to inform the user that a quote has been successfully created. It utilizes the Toast.show method to present a success message in a dismissable mode, allowing the user to manually close the toast. The key functionality occurs in the onclose callback, which is triggered when the toast is dismissed. Inside this callback, the function logs "Toast is closed" to the console and then calls this.getWorkOrderAssignedToVendor(this.vendorAccountId).

This approach ensures that the latest data is fetched manually instead of relying on refreshApex, which may not work correctly on an LWR (Lightning Web Runtime) Page due to its different data handling mechanisms. By explicitly invoking getWorkOrderAssignedToVendor, the component retrieves updated records and reflects any recent changes, ensuring that the user sees the most current information. This method is particularly useful in LWR pages, where RefreshEvent or refreshApex may not always trigger a proper refresh.

Enroll for Career-Building Salesforce Training with Real-Time Projects

Our Salesforce Course is thoughtfully designed to provide a comprehensive understanding of the Salesforce platform, equipping you with the vital skills needed to thrive in the CRM industry. The program covers important modules like Salesforce Admin, Developer, and AI, combining theoretical knowledge with hands-on application. By engaging in real-world projects and practical tasks, you’ll develop the expertise to address complex business challenges with confidence using Salesforce solutions. Our expert instructors ensure you gain both technical skills and industry-specific insights to excel within the Salesforce ecosystem.

In addition to gaining technical knowledge, our Salesforce Training in Sunnyvale offers personalized coaching, exam preparation support, and interview guidance to enhance your career prospects. You’ll have access to in-depth study materials, real-life project experience, and ongoing support throughout the course. Upon completing the program, you’ll be fully prepared for certification exams and equipped with the problem-solving abilities and practical skills that employers highly seek. Start your Salesforce career journey with us and unlock limitless career opportunities. Sign up for a Free Demo now!