cache support for useFetch/useAsyncData

[lucassimines]

Environment

---

• Operating System: Darwin
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.14-27802701.2f53495
• Nitro Version: 0.6.2-27796963.837f894
• Package Manager: npm@8.8.0
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-ccqtvp?file=pages%2Fabout.vue,pages%2Findex.vue,package.json

As you can see, on rc.14 edge if you click "Go to about page" then "Go to home", you will see that the data will be fetched again.
If you change to rc.13, the data won't be fetched again, loading from cache.

Describe the bug

Everytime useFetch is being called, it ma dke a new request, it is not checking for the fetched cached data, as it used to be working by rc.13

Additional context

No response

Logs

No response

[TheAlexLichter]

I think this is intended via nuxt/framework#8885? 🤔

Is there a workaround for this problem? Since the update to version 3.0, every API call with useFetch sends a server request again for me too. Thanks.

[danielroe]

You can implement your own custom cache behaviour by using useAsyncData.

[lucassimines]

You can implement your own custom cache behaviour by using useAsyncData.

Do you think it could be nice to add an example in the docs?

I solved by doing this code:

const banners = useState<TBanner[]>('banners');
const pendingBanners = useState<boolean>('pendingBanners');

if (!banners.value) {
  const { data, pending } = await useLazyFetch<TBanner[]>('/banners');
  banners.value = data.value;
  pendingBanners.value = pending.value;
  watch(data, (data) => (banners.value = data));
  watch(pending, (pending) => (pendingBanners.value = pending));
}

[vanling]

I've wasted some time today trying to figure out why i was seeing data refetched on back and forth page navigation hehehe. Thought i was going insane and broke something in my datafetching. I thought the built in caching was awesome!

[max3xyz]

An example for the documentation would be really helpful.
I think caching fetched data is a very useful feature which is often needed.

[DNA]

You can implement your own custom cache behaviour by using useAsyncData.

That would be a lot of boilerplate code instead of a one-liner, @danielroe… Is this cache removal a final design decision or it is related to the ongoing discussion on nuxt/framework#7569? 🙂

[anc95]

Need built-in cache