Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: improve data fetching docs #21197

Merged
merged 2 commits into from
May 28, 2023
Merged

docs: improve data fetching docs #21197

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d8f37e4
docs : correct `data-fetching` description
jongmin4943 May 28, 2023
3eb6098
docs: small tweaks
danielroe May 28, 2023
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
14 changes: 9 additions & 5 deletions docs/1.getting-started/6.data-fetching.md
View file
Open in desktop
Expand Up @@ -21,7 +21,7 @@ When using a framework like Nuxt that can perform calls and render pages on both

### Network calls duplication

The `useFetch` and `useAsyncData` composables ensure that once an API call is made on the server, the data is properly forwarded to the client in the payload. This JavaScript object is accessible through `window.__NUXT__` and is used on the client to avoid refetching the same data when the code is executed in the browser.
The `useFetch` and `useAsyncData` composables ensure that once an API call is made on the server, the data is properly forwarded to the client in the payload. This JavaScript object is accessible through [`useNuxtApp().payload`](/docs/api/composables/use-nuxt-app#payload) and is used on the client to avoid refetching the same data when the code is executed in the browser.

::alert{icon=⚙️}
Use the [Nuxt DevTools](https://devtools.nuxtjs.org) to inspect this data in the payload tab.
Expand Down Expand Up @@ -186,18 +186,22 @@ const { data: mountains } = await useFetch('/api/mountains', {

#### Keys

`useFetch` and `useAsyncData` use keys to prevent refetching the same data (for example when navigating back to a page previously rendered).
`useFetch` and `useAsyncData` use keys to prevent refetching the same data.

- `useFetch` uses the provided URL as a key. Alternatively, a `key` value can be provided in the `options` object passed as a last argument.
- `useAsyncData` uses its first argument as a key if it is a string. If the first argument is the handler function that performs the query, then a key that is unique to the file name and line number of the instance of `useAsyncData` will be generated for you.

#### Refresh
::alert{icon=📘}
To get the cached data by key, you can use [`useNuxtData`](/docs/api/composables/use-nuxt-data)
::

#### Refresh and execute

If you want to force the function to re-run, you can manually change the key or use the `refresh` function provided by the composables.
If you want to fetch or refresh data manually, use the `execute` or `refresh` function provided by the composables. (`execute` is an alias for `refresh` that works in exactly the same way but is more semantic for cases when `immediate: false`).

```vue
<script setup>
const { data, error, refresh } = await useFetch('/api/users')
const { data, error, execute, refresh } = await useFetch('/api/users')
</script>

<template>
Expand Down