Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

docs(api): add refreshNuxtData util examples #8845

Merged
merged 6 commits into from Nov 10, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
62 changes: 57 additions & 5 deletions docs/content/3.api/3.utils/refresh-nuxt-data.md
Expand Up @@ -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"}
::