useAsyncState composable for fetching asyncdata in composables

useAsyncState.ts

import { Ref } from "vue"

interface AsyncStateOptions<T, O> {
  transform?: (input: T) => O
}

interface AsyncStateReturnType<T> {
  execute: () => Promise<void>,
  refresh: () => Promise<void>,
  pending: Ref<boolean>,
  data: Ref<T>
}
export function useAsyncState<T, O>(key: string, fetchData: () => Promise<T>, options: AsyncStateOptions<T, O>): AsyncStateReturnType<O>

export function useAsyncState<T>(key: string, fetchData: () => Promise<T>): AsyncStateReturnType<T>

export function useAsyncState<T extends O, O>(key: string, fetchData: () => Promise<T>, options?: AsyncStateOptions<T, O>): AsyncStateReturnType<O> {
  const data = useState<O | null>(key, () => null)
  const pending = useState(key + '-pending', () => false)
  const defaultTransform = (data: T) => data
  const transform = options?.transform ?? defaultTransform

  const fetchNewData = async () => {
    pending.value = true
    const response = await fetchData()
    data.value = transform(response)
    pending.value = false
  }

  const execute = async () => {
    if (pending.value || data.value)
      return

    await fetchNewData()
    return
  }

  const refresh = async () =>
    await fetchNewData()

  return {
    execute,
    refresh,
    pending,
    data
  }
}

Example usage

Create a reusable composable:

export const useUserPosts = () => 
 useAsyncState('user-posts', () => GqlUserPosts(), {
    transform: (data) => transformPost(data)
  })
}

Fetch the data from the components (eg pages/index.vue):

<script lang="ts" setup>
const {execute: initialFetch} = useUserPosts()
await initialFetch()
</script>

Use the data and refresh it in a composable:

export const useBlog = () => {
  const {data: userPosts, refresh: refreshUserPosts} = useUserPosts()
  ....
}