`refreshNuxtData` doesn't re-fetch data if `useAsyncData`/`useFetch` (with `getCachedData`) are not "rendered" about nuxt HOT 8 OPEN

Digging into the source code I discovered that I was right. refreshNuxtData only re-fetches the data when useAsyncData is in scope:

I don't think it's a bug at this point, but at the same time it's not documented anywhere. In my opinion it should work even if useAsyncData is not in scope (how can i "invalidate" the cache from another page?). 🤔

from nuxt.

Hello!

The thing with v-if is that it completely removes the component from the tree and as such vue will not update that component anymore since the component is gone. Now when the component reappears, because vue previously destroys that component, a new instance will need to be created using "initial state", where the "initial state" is the data previously fetched on the server side.

So what can u do to fix it? Well here are some suggestions:

1. First is to utilize the v-show attribute instead as it will not remove the component from the tree and only changes the display property.
2. Use the KeepAlive built in component provided by vue so that the component deactivate instead of unmounted.
3. Utilize onMounted lifecycle hooks provided by vue to call refresh, although this means it will be triggered on initial render as well.

Hope this helps!

The problem is that refreshNuxtData doesn’t re-fetch the data as stated in the docs:
https://nuxt.com/docs/api/utils/refresh-nuxt-data

from nuxt.

Start a new pull request in StackBlitz Codeflow.

• nuxt-refreshnuxtdata-bug (Open reproduction)

from nuxt.

Oh, i have the same problem

from nuxt.

What's the solution?

from nuxt.

I've got a similar problem. Some times refreshNuxtData doesn't trigger a fetch. Confirmed by reviewing network tab in browser dev tools.

It's mysterious because:

• I checked that the nuxt payload exists in nuxt devtools, under payload tab.
• And I checked that I am passing in the correct key into refreshNuxtData that corresponds to the keyed state I want to refresh.

Presently thinking through the best way to share a reproduction based on my use case.

from nuxt.

Got a work around I can use for now. Which is to do a fully manual refresh for the given key:

const { refresh } = await useFetch('/some/resource', { key: 'unique-key', watch: false, immediate: false })

Then I would replace the call to refreshNuxtData('unique-key') with a call to refresh()

from nuxt.

I'm also having this problem using a wrapper around useFetch to use te cached value

export default async <T>(url: string) => {
  // Use nuxtData to cache data
  const { data: cached } = useNuxtData<T>(url);

  if (!cached.value) {
    const { data, error } = await useFetch<T>(url, { key: url });

    if (error.value) {
      throw createError({
        ...error.value,
        statusMessage: `Could not fetch data from ${url}`,
      });
    }

    // Update the cache
    cached.value = data.value as T;
  } else {
    console.log(`Getting value from cache for ${url}`);
  }

  return cached;
};

The idea is to use my wrapper and refresh the data when needed

const data = useCachedFetch<UserProfile>('/api/profile')

// somewere else after updating the profile
refreshNuxtData('/api/profile')

I can see that the network request is not made when using my wrapper but using useFetch directly it does.
The same happens if the useFetch is wrapped in callOnce

from nuxt.