Framework-specific clients

[josh-hemphill]

Front-end frameworks have their own way of tracking data like Vue's useFetch(); I looked into providing a custom BaseHttpRequest, but realized I'd have to reimplement a lot that was unnecessary and do some work to override/augment the return types.

Curious if a PR would be excepted for adding framework-specific clients directly, or doing something similar to the request file, but one able to mutate the return types for use in reactive frameworks.

[josh-hemphill]

After testing some stuff, it seems like it'd be pretty hard to override the return type so that reactive objects could be returned.
Maybe a solution would be to allow custom template files to be used, so the critical options could still be generated and fed into a different client.
Something like #1268 but with more template overrides like the main TS file.

[radusuciu]

This isn't what you're asking for exactly, but maybe it's useful.

I wrap my calls to the services generated by this project with a composable that is designed to ensure type safety for parameters, properly extract return types, support reactive and non-reactive parameters, by default re-execute on parameter changes, and return reactive types. I also support optional unwrapping of results and the ability to toggle immediate execution.

Example use:

// foo can be reactive
const { data } = useApiService(ExampleService.exampleTestList, { id: foo })

// all of the params can be reactive
const { data } = useApiService(ExampleService.exampleTestList, params)

The useApiService composable:

import { MaybeRefOrGetter } from '@vueuse/core'

import { isRef, ref, Ref, UnwrapRef, watch } from 'vue'

type MaybeComputedRefValue<T> = T extends Array<infer I>
    ? Array<MaybeRefOrGetter<I>>
    : MaybeRefOrGetter<T>

type MaybeComputedRefObject<T> = {
    [K in keyof T]: MaybeComputedRefValue<T[K]>
}

type Params<T> = MaybeComputedRefObject<T> | MaybeRefOrGetter<T>

type UseApiServiceOptions = {
    immediate?: boolean
    watchParams?: boolean
}

type UseApiServiceOptionsWithUnwrapKey<T, K extends keyof T> = UseApiServiceOptions & {
    unwrapKey: K | undefined
}

type ServiceFnResult<T> = Promise<Awaited<T>> & { cancel(): void }

export interface UseApiServiceReturn<T> {
    isLoading: Ref<boolean>
    isFinished: Ref<boolean>
    data: Ref<T | null>
    error: Ref<any>
    cancel: () => void
    refresh: () => void
}

function resolveNestedUnref<T>(obj: T): UnwrapRef<T> {
    if (isRef(obj)) {
        return resolveNestedUnref(obj.value) as UnwrapRef<T>
    }

    if (typeof obj === 'object' && obj !== null) {
        const result: any = Array.isArray(obj) ? [] : {}
        for (const key in obj) {
            result[key] = resolveNestedUnref(obj[key])
        }
        return result
    }

    return obj as UnwrapRef<T>
}

export default function useApiService<T extends (...args: any[]) => any>(
    serviceFn: T,
    params?: Params<Parameters<T>[0] | null>,
    options?: UseApiServiceOptions
): UseApiServiceReturn<Awaited<ReturnType<T>>>

export default function useApiService<
    T extends (...args: any[]) => any,
    K extends keyof Awaited<ReturnType<T>>
>(
    serviceFn: T,
    params?: Params<Parameters<T>[0] | null> | undefined,
    options?: UseApiServiceOptionsWithUnwrapKey<Awaited<ReturnType<T>>, K>
): UseApiServiceReturn<Awaited<ReturnType<T>>[K]>

export default function useApiService<
    T extends (...args: any[]) => any,
    K extends keyof Awaited<ReturnType<T>>
>(
    serviceFn: T,
    params?: Params<Parameters<T>[0] | null>,
    options?:
        | UseApiServiceOptions
        | UseApiServiceOptionsWithUnwrapKey<Awaited<ReturnType<T>>, K>
): UseApiServiceReturn<Awaited<ReturnType<T>>[K] | Awaited<ReturnType<T>>> {
    const defaultOptions: UseApiServiceOptionsWithUnwrapKey<
        Awaited<ReturnType<T>>,
        K
    > = {
        immediate: true,
        watchParams: true,
        unwrapKey: undefined,
    }

    const mergedOptions = { ...defaultOptions, ...options }

    const isLoading = ref(false)
    const isFinished = ref(false)
    const error = ref(null)
    const request: Ref<ServiceFnResult<ReturnType<T>> | null> = ref(null)

    const data = ref<
        K extends keyof Awaited<ReturnType<T>>
            ? Awaited<ReturnType<T>>[K] | null
            : Awaited<ReturnType<T>> | null
    >(null as any)

    function execute() {
        if (isLoading.value) {
            cancel()
        }
        isLoading.value = true
        isFinished.value = false
        error.value = null

        request.value = serviceFn(resolveNestedUnref(params ?? {}))

        request.value
            ?.then((responseData: Awaited<ReturnType<T>>) => {
                if (
                    mergedOptions.unwrapKey &&
                    mergedOptions.unwrapKey in
                        (responseData as Record<keyof ReturnType<T>, any>)
                ) {
                    data.value = responseData[mergedOptions.unwrapKey] as any
                } else {
                    data.value = responseData as any
                }
            })
            .catch((errorData: any) => {
                error.value = errorData
            })
            .finally(() => {
                isLoading.value = false
                isFinished.value = true
            })
    }

    function cancel() {
        request.value?.cancel()
    }

    if (mergedOptions.immediate) {
        execute()
    }

    if (mergedOptions.watchParams) {
        watch(() => resolveNestedUnref(params), execute)
    }

    return {
        isLoading,
        isFinished,
        data,
        error,
        cancel,
        refresh: execute,
    }
}

I don't promise that it works flawlessly but it's worked great in my hands. Working out the proper incantations to maintain type safety with the level of flexibility that I wanted was challenging. A custom template might do the trick as well.