From 2bc3c18dfaefac319dc0f5edcc2e1c716b6c1606 Mon Sep 17 00:00:00 2001
From: Krutie Patel <krutie.patel@gmail.com>
Date: Thu, 10 Nov 2022 19:08:42 +1000
Subject: [PATCH] docs(api): add `refreshNuxtData` util examples (#8845)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
---
 .../3.api/3.utils/refresh-nuxt-data.md        | 62 +++++++++++++++++--
 1 file changed, 57 insertions(+), 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
index 6e1bd435a0e..35387d05ee6 100644
--- 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"}
+::