From e864c018a96098653eaef831a618fe58d145edf5 Mon Sep 17 00:00:00 2001 From: Jongmin Yoon Date: Mon, 29 May 2023 00:35:28 +0900 Subject: [PATCH] docs: improve data fetching docs (#21197) --- docs/1.getting-started/6.data-fetching.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/docs/1.getting-started/6.data-fetching.md b/docs/1.getting-started/6.data-fetching.md index 46ec37cb47..23e44e3420 100644 --- a/docs/1.getting-started/6.data-fetching.md +++ b/docs/1.getting-started/6.data-fetching.md @@ -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