Nuxt/docs/content/3.api/1.composables/use-async-data.md

1.9 KiB

useAsyncData

::ReadMore{link="/guide/features/data-fetching"} ::

const {
  data: Ref<DataT>,
  pending: Ref<boolean>,
  refresh: () => Promise<void>,
  error: Ref<any>
} = useAsyncData(
  key: string,
  handler: (ctx?: NuxtApp) => Promise<Object>,
  options?: {
    lazy: boolean,
    server: boolean,
    watch: WatchSource[]
  }
)

Params

  • key: a unique key to ensure that data fetching can be properly de-duplicated across requests
  • handler: an asynchronous function that returns a value
  • options:
    • lazy: whether to resolve the async function after loading the route, instead of blocking navigation (defaults to false)
    • default: a factory function to set the default value of the data, before the async function resolves - particularly useful with the lazy: true option
    • server: whether to fetch the data on server-side (defaults to true)
    • transform: a function that can be used to alter handler function result after resolving
    • pick: only pick specified keys in this array from handler function result
    • watch: watch reactive sources to auto refresh
    • initialCache: When set to false, will skip payload cache for initial fetch. (defaults to true)

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.

Return values

  • 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 refresh the data returned by the handler function
  • error: an error object if the data fetching failed

By default, Nuxt waits until a refresh is finished before it can be executed again. Passing true as parameter skips that wait.