Skip to content

Commit

Permalink
docs: improve data fetching docs (#21197)
Browse files Browse the repository at this point in the history
  • Loading branch information
jongmin4943 committed May 28, 2023
1 parent 6eacad0 commit e864c01
Showing 1 changed file with 9 additions and 5 deletions.
14 changes: 9 additions & 5 deletions docs/1.getting-started/6.data-fetching.md
Original file line number Diff line number Diff line change
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

0 comments on commit e864c01

Please sign in to comment.