Skip to content

[useFetch] Option to preserve previous data during refresh #31999

@alihardan

Description

@alihardan

Describe the feature

When useFetch re-fetches (e.g. after a watched state changes), data is reset to null during the fetch. That causes visible flickering or full UI resets, even when only minor changes happen like pagination or filters.

In many apps, it's more useful to keep the previous data visible while the new request is in progress.

Suggested API

const { data } = await useFetch("/api/items", {
  query: {
    'page': page
  },
  watch: [page],
  preservePreviousData: true
});

When preservePreviousData is true, data should hold the last successful value during the next fetch until the new result arrives.

Current workaround

Right now, we have to manually store the previous data in a separate ref using watch, and use a computed to fall back to it when the current data is null. This adds boilerplate for a fairly common use case.

Additional information

  • Would you be willing to help implement this feature?
  • Could this feature be implemented as a module?

Final checks

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions