feat(nuxt): add clearNuxtData (#5227)

Co-authored-by: Pooya Parsa <pooya@pi0.io>

docs/content/2.guide/2.features/5.data-fetching.md

@@ -156,7 +156,7 @@ This method is useful if you want to refresh all the data fetching for a current
 ::ReadMore{link="/api/utils/refresh-nuxt-data"}
 ::
 
-### Example
+#### Example
 
 ```vue
 <template>
@@ -173,6 +173,15 @@ const refresh = () => refreshNuxtData('count')
 </script>
 ```
 
+### `clearNuxtData`
+
+Delete cached data, error status and pending promises of `useAsyncData` and `useFetch`.
+
+This method is useful if you want to invalidate the data fetching for another page.
+
+::ReadMore{link="/api/utils/clear-nuxt-data"}
+::
+
 ## Options API support
 
 Nuxt 3 provides a way to perform `asyncData` fetching within the Options API. You must wrap your component definition within `defineNuxtComponent` for this to work.

docs/content/3.api/3.utils/clear-nuxt-data.md

@@ -0,0 +1,18 @@
+# `clearNuxtData`
+
+::StabilityEdge
+::
+
+Delete cached data, error status and pending promises of `useAsyncData` and `useFetch`.
+
+This method is useful if you want to invalidate the data fetching for another page.
+
+## Type
+
+```ts
+clearNuxtData (keys?: string | string[]): void
+```
+
+## Parameters
+
+* `keys`: On or an array of keys that are used in `useAsyncData` to delete their cached data. If no keys are provided, **every data** will be invalidated.

packages/nuxt/src/app/composables/asyncData.ts

@@ -254,6 +254,28 @@ export function refreshNuxtData (keys?: string | string[]): Promise<void> {
   return useNuxtApp().callHook('app:data:refresh', _keys)
 }
 
+export function clearNuxtData (keys?: string | string[]): void {
+  const nuxtApp = useNuxtApp()
+  const _keys = keys ? Array.from(keys).filter(key => key && typeof key === 'string') : Object.keys(nuxtApp.payload.data)
+
+  for (const key of _keys) {
+    if (key in nuxtApp.payload.data) {
+      nuxtApp.payload.data[key] = undefined
+    }
+    if (key in nuxtApp.payload._errors) {
+      nuxtApp.payload._errors[key] = undefined
+    }
+    if (nuxtApp._asyncData[key]) {
+      nuxtApp._asyncData[key]!.data.value = undefined
+      nuxtApp._asyncData[key]!.error.value = undefined
+      nuxtApp._asyncData[key]!.pending.value = false
+    }
+    if (key in nuxtApp._asyncDataPromises) {
+      nuxtApp._asyncDataPromises[key] = undefined
+    }
+  }
+}
+
 function pick (obj: Record<string, any>, keys: string[]) {
   const newObj = {}
   for (const key of keys) {

packages/nuxt/src/app/nuxt.ts

@@ -69,7 +69,7 @@ interface _NuxtApp {
     data: Ref<any>
     pending: Ref<boolean>
     error: Ref<any>
-  }>,
+  } | undefined>,
 
   ssrContext?: NuxtSSRContext
   payload: {