Skip to main content

useLoading()

Helps track loading and error state of imperative async functions.

tip

useSuspense() or useDLE() are better for GET/read endpoints.

Usage​

<script setup lang="ts">
  import { useLoading, useController } from '@data-client/vue';
  import { PostResource } from './PostResource';
  import PostForm from './PostForm.vue';

  const emit = defineEmits<{ navigateToPost: [id: number] }>();
  const ctrl = useController();
  // highlight-start
  const [handleSubmit, loading, error] = useLoading(
    async (data: FormData) => {
      const post = await ctrl.fetch(PostResource.getList.push, data);
      emit('navigateToPost', post.id);
    },
  );
  // highlight-end
</script>

<template>
  <PostForm @submit="handleSubmit" :loading="loading" :error="error" />
</template>

Returns the wrapped function along with loading and error refs. The wrapped function is stable, so no dependency list is needed: any refs or props it reads are read at call time.

:::

Types​

export default function useLoading<
  F extends (...args: any) => Promise<any>,
>(func: F): [F, Ref<boolean>, Ref<Error | undefined>];

loading is true while the returned promise is pending. If func rejects, the rejection is caught and stored in error; it is cleared again on the next call.

Examples​

Todo creation​

More Demos