Value in props is not updating on hot reload.

[pragya96]

Hi,

I have integrated AEM with Next.js application and want to use one of the feature of next js - swr (stale while revalidate).

It updates the data on the browser whenever there is an update in the data of the API.

The issue here is, I am getting the updated data printed in the browser console hence swr is working fine, but the DOM is not reflecting the updated data in the mapped component.

On debugging, I found that swr is getting the updated data but the updated props are not sent to the editable components.

As per the documentation, MapTo sends the props to the mapped components.

So my question is, does MapTo maps the component with its props only once when the page reloads? 
Is there a way in which MapTo can be invoked again to pass the updated props without reloading the page manually? - (for the updated props to be displayed on the browser).

Any help will be appreciated!

Thanks

[kautuk_sahni]

@ShaileshBassi @DPrakashRaj @Vaibhavi_J @Saravanan_Dharmaraj 

Your expertise is politely sought in reviewing this AEM question and providing insights on the matter. If you could extend your support by offering the author some direction or guidance to overcome the problem, it would be highly regarded. 

[DPrakashRaj · Accepted solution]

MapTo takes care of parsing the JSON model response and passing the correct values as props to the SPA component. It will update the value whenever the component is update via authoring so not sure what you mean here with data updated from the api? If it’s not part of component update and not coming from sling model of the component as json it won’t update it.

If the api data update is not part of component sling model then you can implement it with normal component.