docs: add documentation on data fetching return types (nuxt#1934)

skashif18 · Nov 15, 2021 · c339966 · c339966
1 parent 4a3ba73
commit c339966
Showing 1 changed file with 21 additions and 2 deletions.
diff --git a/docs/content/3.docs/1.usage/1.data-fetching.md b/docs/content/3.docs/1.usage/1.data-fetching.md
@@ -13,7 +13,12 @@ Within your pages, components and plugins you can use `useAsyncData` to get acce
 ### Usage
 
 ```js
-useAsyncData(
+const {
+  data: Ref<DataT>,
+  pending: Ref<boolean>,
+  refresh: (force?: boolean) => Promise<void>,
+  error?: any
+} = useAsyncData(
   key: string,
   fn: () => Object,
   options?: { lazy: boolean, server: boolean }
@@ -29,6 +34,13 @@ useAsyncData(
   * _transform_: A function that can be used to alter fn result after resolving
   * _pick_: Only pick specified keys in this array from fn result
 
+`useAsyncData` returns an object with the following properties:
+
+* **data**: the result of the asynchronous function that is passed in
+* **pending**: a boolean indicating whether the data is still being fetched
+* **refresh**: a function that can be used to force a refresh of the data
+* **error**: an error object if the data fetching failed
+
 Under the hood, `lazy: false` uses `<Suspense>` to block the loading of the route before the data has been fetched. Consider using `lazy: true` and implementing a loading state instead for a snappier user experience.
 
 ### Example
@@ -64,7 +76,12 @@ This composable provides a convenient wrapper around `useAsyncData` and `$fetch`
 ### Usage
 
 ```ts
-useFetch(url: string, options?)
+const {
+  data: Ref<DataT>,
+  pending: Ref<boolean>,
+  refresh: (force?: boolean) => Promise<void>,
+  error?: any
+} = useFetch(url: string, options?)
 ```
 
 Available options:
@@ -81,6 +98,8 @@ Available options:
   * `pick`
   * `transform`
 
+The object returned by `useFetch` has the same properties as that returned by `useAsyncData` ([see above](#useasyncdata)).
+
 ### Example
 
 ```vue [app.vue]