How do I cause a Lightning Web Component on a Lighting Record Page to update when the record is modified

Question

I am developing a Lightning Web Component that will display a custom Approval History list. Basically, I am rebuilding the out-of-the-box Approval History related list. Why? Long story.

So I built the component and the APEX to pull the data and everything is working fine. I added the component to an Opportunity Lightning Record Page. When you view an opportunity that has been submitted for approval, the history shows just fine.

The issue I am having is when you view an opportunity that has not yet been submitted for approval. When I click the "Submit for Approval" button, I would like the custom component to refresh, which it is not.

I have created a DateTime field on Opportunity and I set up each approval step to update this field hoping that I could tie into some lifecycle event and update the component. But I'm a little lost on how to tie everything together.

Worst case scenario, I guess I can just use a JS setTimeout, but that seems a little too hacky and not that performant.

Answer 1

You can make your component reactive by using the lightning emp api or Change Data Capture. They both use CometD.

Another option would be to fire an event, considering that the component is on the same page, which would trigger a method in your component to fetch the data with refreshApex

Which approach you chose mostly depends on/if you expect the component to refresh when someone else does a change to the record, and 2 users or more need to view an updated component, or only 1 user.