When using useFetch with a watcher is it possible to keep data until the new query has a response?

[waxen folio]

I'm using the new 3.7 logic for fetching:

import { stringify } from 'qs-esm';

export const usePayloadFetch = (endpoint: string, query: any = {}) => {
    const serverURL = getPayloadURL();
    const path = computed(() => `${endpoint}${stringify(query, { addQueryPrefix: true })}`);
    return useFetch<any>(() => `${serverURL}/api/${path.value}`, { key: path });
};

When the key changes, e.g. doing pagination, the data is reset to null until the new data is fetched. This is causing the UI to disappear for a split second until the new data is fetched, it's very jarring. Is it possible to prevent this from happening and it to wait for the new fetch to finish before replacing the data.

[distant valley]

Hi @waxen folio. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the provided knowledge sources, Nuxt’s useFetch will, by default, set data to null when the key changes and a new fetch is triggered. This is the standard behavior when using a reactive key (such as a computed path) for dynamic data fetching—when the key changes, the old data is cleared and the new request is initiated, causing a brief moment where data is null and the UI may "flash" or disappear until the new data arrives.

The documentation does not mention a built-in option to keep the previous data visible until the new fetch completes. The default behavior is to reset data to null on key change, as you have observed. The only related options are:

• The status ref, which you can use to manage loading states.
• The default option, which allows you to set an initial value for data, but not to persist the previous value during a fetch.
• The lazy and immediate options, which control when fetching occurs, but not how data is replaced.
• The clear function, which you can call manually to clear data, but this does not affect the automatic clearing on key change.

There is no documented way to delay clearing the data until the new fetch completes, nor an option to "keep previous data until new data arrives" in the official sources. You would need to implement a custom solution in your component logic, such as using a local variable to cache the previous data and display it while the new fetch is pending, but this is not covered in the official documentation.

Summary:
No, according to the official Nuxt documentation, there is no built-in way in useFetch to keep the previous data visible until the new query has a response when the key changes. The data is reset to null by design when a new fetch is triggered due to a key change. You would need to implement a custom workaround in your UI to achieve this behavior if desired.

References:

• useFetch: Reactive Keys and Shared State
• useFetch: Return Values

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@waxen folio Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[mortal tartan]

I've just run into the issue on the latest version of Nuxt and it breaks my UI logic. I would love to know if you or anyone else has discovered a way to revert to previous behavior.

[mortal tartan]

I figured it out! You need to set a manual key and base it on something other than your query. If the key changes, it will set the data to undefined. If the key remains the same, the old data will remain until the new request completes.