Advanced 18 min read

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.

JAVASCRIPT

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.

JAVASCRIPT

Reactive Wire Parameters and Refreshing Data Quiz

1. What does the $ prefix on a @wire configuration property indicate?

2. What does refreshApex do?

3. Every possible data change automatically triggers a wire to re-fetch, with no manual refresh ever needed.

4. What must be stored to later call refreshApex on a wired result?

5. "I updated a record but the UI still shows the old value" is most likely caused by what?

Log in to submit the quiz and save your score.

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.