docs(api): add refreshNuxtData util examples (#8845)

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
nuxt · Nov 10, 2022 · 2bc3c18 · 2bc3c18
1 parent c32c1d0
commit 2bc3c18
Showing 1 changed file with 57 additions and 5 deletions.
diff --git a/docs/content/3.api/3.utils/refresh-nuxt-data.md b/docs/content/3.api/3.utils/refresh-nuxt-data.md
@@ -5,15 +5,67 @@ description: refreshNuxtData refetches all data from the server and updates the
 
 # `refreshNuxtData`
 
-`refreshNuxtData` refetches all data from the server and updates the page.
+`refreshNuxtData` re-fetches all data from the server and updates the page as well as invalidates the cache of `useAsyncData`, `useLazyAsyncData`, `useFetch` and `useLazyFetch`.
 
-::ReadMore{link="/getting-started/data-fetching"}
-::
+## Type
 
 ```ts
 refreshNuxtData(keys?: string | string[])
 ```
 
-Available options:
+**Parameters:**
+
+* `keys`:
+
+    **Type**: `String | String[]`
+
+    `refreshNuxtData` accepts a single or an array of strings as `keys` that are used to fetch the data. This parameter is **optional**. All `useAsyncData` and `useFetch` are re-fetched when no `keys` are specified.
+
+## Examples
+
+### Refresh All data
+
+This example below refreshes all data being fetched using `useAsyncData` and `useFetch` on the current page.
+
+```vue [pages/some-page.vue]
+<template>
+  <div>
+    <button :disabled="refreshing" @click="refreshAll">
+      Refetch All Data
+    </button>
+  </div>
+</template>
+
+<script setup>
+const refreshing = ref(false)
+const refreshAll = async () => {
+  refreshing.value = true
+  try {
+    await refreshNuxtData()
+  } finally {
+    refreshing.value = false
+  }
+}
+</script>
+```
+
+### Refresh Specific Data
+
+This example below refreshes only data where the key matches to `count`.
+
+```vue [pages/some-page.vue]
+<template>
+  <div>
+    {{ pending ? 'Loading' : count }}
+  </div>
+  <button @click="refresh">Refresh</button>
+</template>
 
-* `keys`: Provides an array of keys that are used in `useAsyncData` to refetch. When it's not specified, all `useAsyncData` and `useFetch` will be refetched.
+<script setup>
+const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
+const refresh = () => refreshNuxtData('count')
+</script>
+```
+
+::ReadMore{link="/getting-started/data-fetching"}
+::