How do I handle the types for both paginated and non-paginated fetch results in the same function?

I have a fetch query that queries a backend API that can return paginated or non-paginated data.

The paginated data will come back as an object with meta and data sub-objects.

Non-paginated data just comes back as an array.

I can set the type for the non-paginated data as an array. How do I handle the case when paginated data comes back?

I want to do something like set a paginated interface then state that the result can be a workflow[] OR paginatedWorkflow

But my IDE says the paginated 'data' does not exist.

Code below:

interface paginatedWorkflow {
  meta: {};
  data: Workflow[]; 
}

export function useGetWorkflows(
 paginate: boolean,
 search: string,
 sort: string,
 order: string,
 page: number,
 size: number
) {
 return useFetch<Workflow[] | paginatedWorkflow>(uri, {
 method: "GET",
 baseURL: runtimeConfig.public.apiBaseURL,
 headers: {
 "Content-Type": "application/json",
    },
 params: {
 paginate: paginate,
 search: search,
 sort: sort,
 order: order,
 page: page,
 size: size,
    },
  });
}

I call the function from within component or Pinia store, i.e.:

async getWorkflows(
      paginate: boolean,
      search: string,
      sort: string,
      order: string,
      page: number,
      size: number
    ) {
      const { data , pending, refresh, error } =
        await useGetWorkflows(
          paginate,
          search,
          sort,
          order,
          page,
          size
        );
      if (paginate) {
        this.workflows = data?.value?.data;
      } else {
        this.workflows = data?.value?? [];
      }
      if (error.value) {
        useNegativeNotify("Error retrieving workflows: " + error.value);
      }
    },

Define a new type/interface called PaginatedWorkflow with two properties: meta (metadata) and data (an array of workflows).

Create a union type called FetchResult that can represent either an array of workflows or a paginated workflow object.
Modify the useGetWorkflows function to use the FetchResult type as the generic type argument for the useFetch function.
Update the function signature to include the required parameters for the fetch query.

Make sure to provide the appropriate values for the uri, runtimeConfig.public.apiBaseURL, and other necessary properties within the useFetch call.
With these changes, the useGetWorkflows function can handle both paginated and non-paginated fetch responses by specifying the FetchResult type.

Below is the your code that I modified, hope it helps

interface PaginatedWorkflow {
  meta: {};
  data: Workflow[]; 
}

type FetchResult = Workflow[] | PaginatedWorkflow;

export function useGetWorkflows(
  paginate: boolean,
  search: string,
  sort: string,
  order: string,
  page: number,
  size: number
) {
  return useFetch<FetchResult>(uri, {
    method: "GET",
    baseURL: runtimeConfig.public.apiBaseURL,
    headers: {
      "Content-Type": "application/json",
    },
    params: {
      paginate: paginate,
      search: search,
      sort: sort,
      order: order,
      page: page,
      size: size,
    },
  });
}

I hope this works for you

async getWorkflows(
  paginate: boolean,
  search: string,
  sort: string,
  order: string,
  page: number,
  size: number
) {
  const { data, pending, refresh, error } = await useGetWorkflows(
    paginate,
    search,
    sort,
    order,
    page,
    size
  );

  if (paginate) {
    if (Array.isArray(data)) {
      this.workflows = data;
    } else {
      this.workflows = data?.data ?? [];
    }
  } else {
    this.workflows = data ?? [];
  }

  if (error) {
    useNegativeNotify("Error retrieving workflows: " + error);
  }
}