Reactive Wire Parameters and Refreshing Data
By the end of this lesson, you'll be able to:
- Pass a reactive parameter into @wire so it automatically re-fetches on change
- Use refreshApex to manually force a re-fetch
- Avoid stale-UI bugs after a write operation
Prerequisites: "createRecord, updateRecord, and deleteRecord"
Reactive Wire Parameters
@api recordId;
@wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD] })
account;
The $ prefix on '$recordId' marks it as a reactive parameter — whenever this.recordId changes (for instance, because a parent passed down a newly-selected record's ID), the wire automatically re-fetches with the new value. No manual refresh call needed for this case.
refreshApex
import { refreshApex } from '@salesforce/apex';
async handleSave() {
await updateRecord({ fields });
await refreshApex(this.wiredAccountResult);
}
Some changes — like an update made through a different path than the wire itself watches — won't automatically trigger a re-fetch. refreshApex, given a reference to the wired result, forces a manual re-fetch so the UI reflects the latest data.
A Worked Example
@wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD] })
wiredAccount(result) {
this.wiredAccountResult = result; // keep a reference for refreshApex later
this.account = result.data;
}
Using the function form of @wire (rather than a plain property) gives access to the full result object, which is what refreshApex needs a reference to.
Why This Matters in Real Projects
"I updated the record, but the UI still shows the old value" is a very common real bug — it almost always means either a reactive parameter wasn't actually reassigned, or refreshApex was needed but never called after a write.
Exercise
A wire declaration uses recordId: recordId (without the $ prefix) instead of '$recordId'. Explain, as a comment, what breaks.
Show hint
Recall what the $ prefix specifically enables.
Exercise
Challenge: after calling updateRecord successfully, the UI still shows the old value. What is the likely fix?
Show hint
Think about the manual escape hatch this lesson introduces.
Reactive Wire Parameters and Refreshing Data Quiz
My Notes
Log in to keep private notes on this lesson.
Questions about this lesson
No questions yet — be the first to ask.
Log in to ask a question about this lesson.
Summary
A $-prefixed reactive parameter makes @wire automatically re-fetch when its value changes — and refreshApex is the manual escape hatch for the cases automatic reactivity doesn't cover.