@lgarciawebdev/use-fetch-state/src/index.ts

A Nuxt composable for managing fetch state using useFetch with auto-import and type support.

import { ref } from 'vue'
import { useFetch } from '#imports'

export interface UseFetchOptions<T> {
  method?: string
  body?: any
  headers?: Record<string, string>
  query?: Record<string, any>
  key?: string
  default?: () => T
  lazy?: boolean
  immediate?: boolean
  server?: boolean
  transform?: (input: any) => T
}

export function useFetchState<T>(
  url: string,
  params?: UseFetchOptions<T>
) {
    const data = ref<T | null>(null)
    const error = ref<unknown>(null)
    const status = ref<'idle' | 'pending' | 'success' | 'error'>('idle')

    async function actionFn(event?: Event) {
        if (event?.preventDefault) event.preventDefault()
        status.value = 'pending'
        error.value = null

        try {
            const { data: fetchedData, error: fetchError } = await useFetch(url, {
                ...params
        })

        if (fetchError.value) {
            status.value = 'error'
            error.value = fetchError.value
        } else {
            status.value = 'success'
            data.value = fetchedData.value as T
        }
        } catch (err) {
            status.value = 'error'
            error.value = err
        }
    }

    function clear() {
        data.value = null
        error.value = null
        status.value = 'idle'
    }

    async function refresh() {
        return actionFn()
    }

    return {
        data,
        error,
        status,
        actionFn,
        refresh,
        clear
    }
}