Pass data through attributes or URL parameters?
In my app i have a lot of modal popups (like contact details , donation details , transaction details etc ) . What would be the best way to pass data ? I can think of 3 ways : On click of a row , 1 : I can pass the whole row to the popup via attributes . 2 : only pass the row id through attributes and make a new APl call inside the modal . 3 : pass the row id through URL parameters and create the APl call in the modal . What is the best way to do it ? Disclaimer : This is based on my knowledge of web components so far , so there could be better ways to do things . I think it really depends on the scenario . If the idea is that the modal is generic enough for reuse in multiple scenarios , setting an API call within the context of a component means that it becomes a bit restrictive . At the moment , I opt for events to trigger on -page API calls , so I can have a modal for multiple use -cases and then just use the click event to trigger whatever API call there is on the page . Then there 's error management , etc . , so it 's not a trivial task . Would be cool to have some place to discuss all these scenarios and have everyone contribute in their experience . 💯1Pass the data into the component via attributes or contexts The best approach depends on your specific requirements , but here 's a general guideline : Use Approach #1 (passing complete data ) if : - Your data is relatively stable - Quick modal opening is important - The data size per row is reasonable - You don 't need deep linking Use Approach #2 (ID + new API call ) if : - Data freshness is critical - Row data is large - You need to optimize initial page load - You have good network conditions Use Approach #3 (URL parameters ) if : - You need shareable /bookmarkable modals - SEO for modal content is important - Deep linking is a requirement - You 're building a document -centric application For most applications , I would recommend Approach #1 with a hybrid strategy : - Pass the complete row data for immediate display - Optionally refresh the data in the background if the modal stays open for a while or if specific actions require fresh data - Implement a simple cache invalidation strategy 👆1Our new toddle friend
