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

docs: improve data fetching docs (#21197)

Browse Source
This commit is contained in:
Jongmin Yoon 2023-05-29 00:35:28 +09:00 committed by GitHub
parent 6eacad03b8
commit e864c018a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/1.getting-started/6.data-fetching.md
View File

@ -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.
@ -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)
::
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.
#### Refresh and execute
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>