{"id":1814,"date":"2023-11-28T05:00:00","date_gmt":"2023-11-28T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1814"},"modified":"2023-11-28T16:56:03","modified_gmt":"2023-11-29T00:56:03","slug":"sharereplay-code-challenge-1-solution","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/sharereplay-code-challenge-1-solution\/","title":{"rendered":"ShareReplay Code Challenge #1 Solution"},"content":{"rendered":"\n

What was wrong with yesterday’s code example<\/a>? Here it is as a reminder:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Since the developer used the shareReplay<\/a><\/code> operator, the intent was to cache the result of the HTTP request so that we do not make that request repeatedly. <\/p>\n\n\n\n

The problem is that if several components call the getData()<\/code> method, they all get a brand new Observable since the method returns a new request every time, which defeats the purpose of using shareReplay<\/code>.<\/p>\n\n\n\n

How can we fix this? By creating the Observable once then sharing the results in subsequent calls to getData():<\/code><\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Here’s another way to do it, perhaps even more readable:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Why do these solutions work? DataService<\/code> is a singleton<\/a>, which means all components use the same instance of DataService<\/code>. As a result, any property of DataService<\/code> (such as cache$<\/code>) is the same for all components that access it.<\/p>\n\n\n\n

Another critical thing to note is that HTTP requests are cold observables<\/a>, which means they only fire when a subscriber subscribes to them.<\/p>\n","protected":false},"excerpt":{"rendered":"

What was wrong with yesterday’s code example? Here it is as a reminder: Since the developer used the shareReplay operator, the intent was to cache the result of the HTTP request so that we do not make that request repeatedly. The problem is that if several components call the getData() method, they all get a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,40,12,10],"tags":[],"class_list":["post-1814","post","type-post","status-publish","format-standard","hentry","category-angular","category-code-challenge","category-operators","category-rxjs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1814","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1814"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1814\/revisions"}],"predecessor-version":[{"id":1828,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1814\/revisions\/1828"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}