{"id":116,"date":"2020-10-07T14:07:43","date_gmt":"2020-10-07T12:07:43","guid":{"rendered":"https:\/\/transferttexei.wordpress.com\/2021\/08\/10\/refresh-a-record-page-from-a-lightning-web-component\/"},"modified":"2023-08-15T17:16:44","modified_gmt":"2023-08-15T15:16:44","slug":"refresh-a-record-page-from-a-lightning-web-component","status":"publish","type":"post","link":"https:\/\/texei.com\/en\/advices\/refresh-a-record-page-from-a-lightning-web-component\/","title":{"rendered":"Refresh a record page from a Lightning web component"},"content":{"rendered":"\r\n<p>In this article, we will discuss a common use case of Lightning Web Component.\u00a0<a href=\"https:\/\/developer.salesforce.com\/docs\/component-library\/documentation\/en\/lwc\/lwc.data_ui_api\" target=\"_blank\" rel=\"noopener\">Lightning Data Service<\/a> is a great tool allowing you to use the same cache as Lightning Experience, bringing better performances and less code to write.\u00a0<\/p>\r\n\r\n\r\n\r\n\r\n\r\n<p>Using Lightning Base Components like <code><a href=\"https:\/\/developer.salesforce.com\/docs\/component-library\/bundle\/lightning-record-form\/documentation\" target=\"_blank\" rel=\"noopener\">lightning-record-form<\/a><\/code> or using out-of-the-box <code><a href=\"https:\/\/developer.salesforce.com\/docs\/component-library\/documentation\/en\/lwc\/lwc.data_wire_example\" target=\"_blank\" rel=\"noopener\">getRecord<\/a><\/code> or <code><a href=\"https:\/\/developer.salesforce.com\/docs\/component-library\/documentation\/en\/lwc\/lwc.data_salesforce_write\" target=\"_blank\" rel=\"noopener\">createRecord<\/a><\/code> methods will make record editing much easier. Thanks to the shared cache from Lightning Data Service, updating a record from your custom component will automatically update the standard record page, and vice versa.<\/p>\r\n\r\n\r\n\r\n<p>Still, you\u2019ll most likely end up at some point using Apex, if your use case is a little bit more complex than that, for instance involving a web service or multi-record editing.<\/p>\r\n\r\n\r\n\r\n<h2>Saving the current record from Apex have one drawback:<\/h2>\r\n<p>It\u2019s done outside of the eye of Lightning Data Service, and thus will not refresh the page correctly. Your component may display the correct updated value, but Salesforce\u2019s standard record page will still display the old one.<\/p>\r\n\r\n\r\n\r\n<p>So how do you ask to your record page to force update itself\u00a0? Well, Aura had a nice mechanism for it, <a href=\"https:\/\/developer.salesforce.com\/docs\/component-library\/bundle\/force:refreshView\/documentation\" target=\"_blank\" rel=\"noopener\">force:refreshView<\/a>. After the record was updated from Apex, you could just call it to ask Salesforce to refresh its own cache:<\/p>\r\n\r\n\r\n<script src=\"https:\/\/gist.github.com\/4a0919329cd5ef0f0b26f82e13aad850.js\"><\/script>\n\r\n\r\n\r\n<p>But alas, there was no such event in LWC &#x1f629;<\/p>\r\n\r\n\r\n\r\n<p>I\u2019ve seen several workarounds, from calling <code>force:refreshView<\/code> from LWC via a small hack, to saving a second time the record after Apex update was done, this time via Lightning Data Service so that the cache would update. Obviously, none of these methods were neither optimal nor recommended.<\/p>\r\n\r\n\r\n\r\n<p>So how can we do it properly?<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Enters getRecordNotifyChange<\/h2>\r\n\r\n\r\n\r\n<h3>Starting <a href=\"https:\/\/releasenotes.docs.salesforce.com\/en-us\/winter21\/release-notes\/rn_lwc_modules.htm\" target=\"_blank\" rel=\"noopener\">Winter \u201921<\/a>, there is a new function in town!<\/h3>\r\n\r\n\r\n\r\n<p>Using it is as simple as what we\u2019ve been used to in Aura. You\u2019ll just need to import it (<code>import { getRecordNotifyChange } from 'lightning\/uiRecordApi';<\/code>), and then call it with a list of record Ids (<code>getRecordNotifyChange([{recordId: this.recordId}]);<\/code>).<\/p>\r\n\r\n\r\n\r\n<h3>Full sample code looks like this :<\/h3>\r\n\r\n\r\n<script src=\"https:\/\/gist.github.com\/4a0919329cd5ef0f0b26f82e13aad850.js\"><\/script>\n\r\n\r\n\r\n<p>Note that this new function is even more powerful than the old <code>force:refreshView<\/code> event, because you can not only refresh the current record page, but also pass a list of all record Ids you\u2019ve updated. This will prevent navigating to other records with cache being not up-to-date, and thus invalid data displayed, and frustrated users.<\/p>\r\n\r\n\r\n\r\n<h3>This implies one change though :<\/h3>\r\n<p><code>force:refreshView<\/code> was refreshing the whole page, whereas <code>getRecordNotifyChange()<\/code> is only refreshing the records you ask him to refresh. So if your Apex code is for instance updated the current Account, but also some child Contacts, you may have to pass to <code>getRecordNotifyChange()<\/code> all the Ids updated by your Apex method.<\/p>\r\n\r\n\r\n\r\n<h3>This makes sense<\/h3>\r\n<p>When you think about it, everything around LWC is done with performance in mind. So updating only a subset of records instead of a whole page (which may includes several dozen of records when you think of related lists) will always be faster.<\/p>\r\n\r\n\r\n\r\n<p>Looking at a method updating an Account and its related Contacts. You would need to return the list of updated Ids:<\/p>\r\n\r\n\r\n<script src=\"https:\/\/gist.github.com\/4dcf0a8d1585fb2fe62d0079b8c379c6.js\"><\/script>\n\r\n\r\n\r\n<p>And then just pass the list of these updated records to <code>getRecordNotifyChange()<\/code>\u00a0:<\/p>\r\n\r\n\r\n<script src=\"https:\/\/gist.github.com\/54236e4c05f393f4837f6c735966809f.js\"><\/script>\n\r\n\r\n\r\n<p>So it\u2019s a little bit of overhead work compared to <code>force:refreshView<\/code> if you\u2019re updating several records, but that\u2019s for the sake of performance. And you don\u2019t want anyone to tell you that your custom component is slow, right\u00a0?<\/p>\r\n\r\n\r\n\r\n<p>One part where <code>getRecordNotifyChange()<\/code> isn\u2019t at parity with <code>force:refreshView<\/code> is that it won\u2019t bring new records to the local cache. What does that mean\u00a0? Let\u2019s say you create new Contacts from an Account page, <code>force:refreshView<\/code> would refresh the whole page, and new Contacts would appear in the related list. <code>getRecordNotifyChange()<\/code> however can refresh existing Contacts in the related list, but will not bring new Contacts to the page.<\/p>\r\n\r\n\r\n\r\n<p>Hopefully, this gap will be closed in a future release.<\/p>\r\n\r\n\r\n\r\n<p>You can learn more in the Lightning web components developer guide.<\/p>\r\n\r\n\r\n\r\n<p>So no time to lose, go update your existing Lightning web components now! And if you want to learn more, read our article about <a href=\"https:\/\/texei.com\/conseils\/lightning-migration-for-admins-the-opportunity-to-clean-and-improve-your-org-to-meet-flexibility\/\" target=\"_blank\" rel=\"noopener\">Lightning Migration for Admins<\/a>! &#x1f4bb;<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>In this article, we will discuss a common use case of Lightning Web Component.\u00a0Lightning Data Service is a great tool allowing you to use the same cache as Lightning Experience, bringing better performances and less code to write.\u00a0 Using Lightning Base Components like lightning-record-form or using out-of-the-box getRecord or createRecord methods will make record editing [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[300],"tags":[],"class_list":["post-116","post","type-post","status-publish","format-standard","hentry","category-advices"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Refresh a record page from a Lightning web component - Texe\u00ef<\/title>\n<meta name=\"description\" content=\"Understand a common use\u00a0case of Lightning Web Component in this article and why Lightning Data Service is a great tool!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/texei.com\/en\/advices\/refresh-a-record-page-from-a-lightning-web-component\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Refresh a record page from a Lightning web component\" \/>\n<meta property=\"og:description\" content=\"Understand a common use\u00a0case of Lightning Web Component in this article and why Lightning Data Service is a great tool!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/texei.com\/en\/advices\/refresh-a-record-page-from-a-lightning-web-component\/\" \/>\n<meta property=\"og:site_name\" content=\"Texe\u00ef\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-07T12:07:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-15T15:16:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2020\/10\/1_aGysEtUVKOMAGu5_VpWzxQ.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"666\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabien Taillon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/texei.com\\\/en\\\/advices\\\/refresh-a-record-page-from-a-lightning-web-component\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/texei.com\\\/en\\\/advices\\\/refresh-a-record-page-from-a-lightning-web-component\\\/\"},\"author\":{\"name\":\"Fabien Taillon\",\"@id\":\"https:\\\/\\\/texei.com\\\/#\\\/schema\\\/person\\\/082ce6d13635571cae4161f1d4f5a9a7\"},\"headline\":\"Refresh a record page from a Lightning web component\",\"datePublished\":\"2020-10-07T12:07:43+00:00\",\"dateModified\":\"2023-08-15T15:16:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/texei.com\\\/en\\\/advices\\\/refresh-a-record-page-from-a-lightning-web-component\\\/\"},\"wordCount\":716,\"publisher\":{\"@id\":\"https:\\\/\\\/texei.com\\\/#organization\"},\"articleSection\":[\"Advices\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/texei.com\\\/en\\\/advices\\\/refresh-a-record-page-from-a-lightning-web-component\\\/\",\"url\":\"https:\\\/\\\/texei.com\\\/en\\\/advices\\\/refresh-a-record-page-from-a-lightning-web-component\\\/\",\"name\":\"Refresh a record page from a Lightning web component - Texe\u00ef\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/texei.com\\\/#website\"},\"datePublished\":\"2020-10-07T12:07:43+00:00\",\"dateModified\":\"2023-08-15T15:16:44+00:00\",\"description\":\"Understand a common use\u00a0case of Lightning Web Component in this article and why Lightning Data Service is a great tool!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/texei.com\\\/en\\\/advices\\\/refresh-a-record-page-from-a-lightning-web-component\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/texei.com\\\/en\\\/advices\\\/refresh-a-record-page-from-a-lightning-web-component\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/texei.com\\\/en\\\/advices\\\/refresh-a-record-page-from-a-lightning-web-component\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/texei.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Advices\",\"item\":\"https:\\\/\\\/texei.com\\\/en\\\/category\\\/advices\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Refresh a record page from a Lightning web component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/texei.com\\\/#website\",\"url\":\"https:\\\/\\\/texei.com\\\/\",\"name\":\"Texe\u00ef\",\"description\":\"Turn your IT into Business\",\"publisher\":{\"@id\":\"https:\\\/\\\/texei.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/texei.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/texei.com\\\/#organization\",\"name\":\"Texe\u00ef\",\"url\":\"https:\\\/\\\/texei.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/texei.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/texei.com\\\/dev\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/logo-essai-1.jpg\",\"contentUrl\":\"https:\\\/\\\/texei.com\\\/dev\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/logo-essai-1.jpg\",\"width\":2560,\"height\":1102,\"caption\":\"Texe\u00ef\"},\"image\":{\"@id\":\"https:\\\/\\\/texei.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/texei.com\\\/#\\\/schema\\\/person\\\/082ce6d13635571cae4161f1d4f5a9a7\",\"name\":\"Fabien Taillon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/texei.com\\\/dev\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/avatar_user_5_1766076207-96x96.png\",\"url\":\"https:\\\/\\\/texei.com\\\/dev\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/avatar_user_5_1766076207-96x96.png\",\"contentUrl\":\"https:\\\/\\\/texei.com\\\/dev\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/avatar_user_5_1766076207-96x96.png\",\"caption\":\"Fabien Taillon\"},\"url\":\"https:\\\/\\\/texei.com\\\/en\\\/author\\\/fabient\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Refresh a record page from a Lightning web component - Texe\u00ef","description":"Understand a common use\u00a0case of Lightning Web Component in this article and why Lightning Data Service is a great tool!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/texei.com\/en\/advices\/refresh-a-record-page-from-a-lightning-web-component\/","og_locale":"en_US","og_type":"article","og_title":"Refresh a record page from a Lightning web component","og_description":"Understand a common use\u00a0case of Lightning Web Component in this article and why Lightning Data Service is a great tool!","og_url":"https:\/\/texei.com\/en\/advices\/refresh-a-record-page-from-a-lightning-web-component\/","og_site_name":"Texe\u00ef","article_published_time":"2020-10-07T12:07:43+00:00","article_modified_time":"2023-08-15T15:16:44+00:00","og_image":[{"width":666,"height":360,"url":"https:\/\/texei.com\/dev\/wp-content\/uploads\/2020\/10\/1_aGysEtUVKOMAGu5_VpWzxQ.jpeg","type":"image\/jpeg"}],"author":"Fabien Taillon","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/texei.com\/en\/advices\/refresh-a-record-page-from-a-lightning-web-component\/#article","isPartOf":{"@id":"https:\/\/texei.com\/en\/advices\/refresh-a-record-page-from-a-lightning-web-component\/"},"author":{"name":"Fabien Taillon","@id":"https:\/\/texei.com\/#\/schema\/person\/082ce6d13635571cae4161f1d4f5a9a7"},"headline":"Refresh a record page from a Lightning web component","datePublished":"2020-10-07T12:07:43+00:00","dateModified":"2023-08-15T15:16:44+00:00","mainEntityOfPage":{"@id":"https:\/\/texei.com\/en\/advices\/refresh-a-record-page-from-a-lightning-web-component\/"},"wordCount":716,"publisher":{"@id":"https:\/\/texei.com\/#organization"},"articleSection":["Advices"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/texei.com\/en\/advices\/refresh-a-record-page-from-a-lightning-web-component\/","url":"https:\/\/texei.com\/en\/advices\/refresh-a-record-page-from-a-lightning-web-component\/","name":"Refresh a record page from a Lightning web component - Texe\u00ef","isPartOf":{"@id":"https:\/\/texei.com\/#website"},"datePublished":"2020-10-07T12:07:43+00:00","dateModified":"2023-08-15T15:16:44+00:00","description":"Understand a common use\u00a0case of Lightning Web Component in this article and why Lightning Data Service is a great tool!","breadcrumb":{"@id":"https:\/\/texei.com\/en\/advices\/refresh-a-record-page-from-a-lightning-web-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/texei.com\/en\/advices\/refresh-a-record-page-from-a-lightning-web-component\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/texei.com\/en\/advices\/refresh-a-record-page-from-a-lightning-web-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/texei.com\/"},{"@type":"ListItem","position":2,"name":"Advices","item":"https:\/\/texei.com\/en\/category\/advices\/"},{"@type":"ListItem","position":3,"name":"Refresh a record page from a Lightning web component"}]},{"@type":"WebSite","@id":"https:\/\/texei.com\/#website","url":"https:\/\/texei.com\/","name":"Texe\u00ef","description":"Turn your IT into Business","publisher":{"@id":"https:\/\/texei.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/texei.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/texei.com\/#organization","name":"Texe\u00ef","url":"https:\/\/texei.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/texei.com\/#\/schema\/logo\/image\/","url":"https:\/\/texei.com\/dev\/wp-content\/uploads\/2021\/03\/logo-essai-1.jpg","contentUrl":"https:\/\/texei.com\/dev\/wp-content\/uploads\/2021\/03\/logo-essai-1.jpg","width":2560,"height":1102,"caption":"Texe\u00ef"},"image":{"@id":"https:\/\/texei.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/texei.com\/#\/schema\/person\/082ce6d13635571cae4161f1d4f5a9a7","name":"Fabien Taillon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/texei.com\/dev\/wp-content\/uploads\/2025\/12\/avatar_user_5_1766076207-96x96.png","url":"https:\/\/texei.com\/dev\/wp-content\/uploads\/2025\/12\/avatar_user_5_1766076207-96x96.png","contentUrl":"https:\/\/texei.com\/dev\/wp-content\/uploads\/2025\/12\/avatar_user_5_1766076207-96x96.png","caption":"Fabien Taillon"},"url":"https:\/\/texei.com\/en\/author\/fabient\/"}]}},"_links":{"self":[{"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/posts\/116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/comments?post=116"}],"version-history":[{"count":0,"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/posts\/116\/revisions"}],"wp:attachment":[{"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/media?parent=116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/categories?post=116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/tags?post=116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}