framit/app/composables/useApi.ts

import type { FetchError, FetchOptions } from 'ofetch';
import type { ApiError } from '~/types/api/error';
import type { HttpMethod } from '~/types/http-method';
import { QueryResult } from '~/types/query-result';

export type UseApiResponse<T, B = unknown> = QueryResult<T, B>;

export interface UseApi {
  get: <T>(path: string, opts?: FetchOptions, immediate?: boolean) => UseApiResponse<T>;
  del: <T>(path: string, opts?: FetchOptions, immediate?: boolean) => UseApiResponse<T>;
  post: <T, B = unknown>(path: string, opts?: FetchOptions, immediate?: boolean, body?: B) => UseApiResponse<T, B>;
  put: <T, B = unknown>(path: string, opts?: FetchOptions, immediate?: boolean, body?: B) => UseApiResponse<T, B>;
  patch: <T, B = unknown>(path: string, opts?: FetchOptions, immediate?: boolean, body?: B) => UseApiResponse<T, B>;
}

export interface CreateRequestOptions<PayloadT> {
  host?: string;
  path: string;
  immediate?: boolean;
  method: HttpMethod;
  body?: PayloadT;
  opts?: FetchOptions;
}

const createRequest = <ResponseT = unknown, PayloadT = unknown>(
  options: CreateRequestOptions<PayloadT>,
): QueryResult<ResponseT, PayloadT> => {
  const response = new QueryResult<ResponseT, PayloadT>();
  const { apiBase } = useRuntimeConfig().public;

  const run = async (requestBody?: PayloadT): Promise<void> => {
    response.loading.value = true;
    response.error.value = null;

    try {
      const res = await $fetch<ResponseT>(options.path, {
        ...options.opts,
        baseURL: options.host ?? apiBase,
        method: options.method,
        body: requestBody ?? undefined,
      });
      response.data.value = res;
    } catch (e) {
      const fetchError = e as FetchError;
      const errBody = fetchError?.response?._data as ApiError | undefined;
      response.error.value = errBody ?? {
        message: fetchError.message || 'backend.errors.unknown',
        success: false,
      };
    } finally {
      response.loading.value = false;
    }
  };
  response.run = run;

  if (options.immediate) run(options.body);

  return response;
};

export const useApi = (host?: string): UseApi => {
  const get = <T>(path: string, opts?: FetchOptions, immediate: boolean = true) =>
    createRequest<T>({ method: 'GET', path, opts, immediate, host });
  const del = <T>(path: string, opts?: FetchOptions, immediate: boolean = true) =>
    createRequest<T>({ method: 'DELETE', path, opts, immediate, host });
  const post = <T, B = unknown>(path: string, opts?: FetchOptions, immediate: boolean = true, body?: B) =>
    createRequest<T, B>({ method: 'POST', path, opts, immediate, body, host });
  const put = <T, B = unknown>(path: string, opts?: FetchOptions, immediate: boolean = true, body?: B) =>
    createRequest<T, B>({ method: 'PUT', path, opts, immediate, body, host });
  const patch = <T, B = unknown>(path: string, opts?: FetchOptions, immediate: boolean = true, body?: B) =>
    createRequest<T, B>({ method: 'PATCH', path, opts, immediate, body, host });

  return { get, post, put, patch, del };
};