Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 05:35:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
This commit is contained in:
Krutie Patel 2022-11-10 19:08:42 +10:00 committed by GitHub
parent c32c1d0623
commit 2bc3c18dfa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 57 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
docs/content/3.api/3.utils/refresh-nuxt-data.md
View File

@ -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`: Provides an array of keys that are used in `useAsyncData` to refetch. When it's not specified, all `useAsyncData` and `useFetch` will be refetched.
* `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>
<script setup>
const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
const refresh = () => refreshNuxtData('count')
</script>
```
::ReadMore{link="/getting-started/data-fetching"}
::