feat(nuxt): add clearNuxtData (#5227)

Co-authored-by: Pooya Parsa <[email protected]>
nuxt · Sep 7, 2022 · b2f573f · b2f573f
1 parent 1c07914
commit b2f573f
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 2 deletions.
diff --git a/docs/content/2.guide/2.features/5.data-fetching.md b/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.

diff --git a/docs/content/3.api/3.utils/clear-nuxt-data.md b/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.
diff --git a/packages/nuxt/src/app/composables/asyncData.ts b/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) {

diff --git a/packages/nuxt/src/app/nuxt.ts b/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: {