fix: refactor of api structure (#2544)

* Refactored mutation and query types and callables

* Refactored version and other queries to new way of calling function

* update type declaration to support options

* update getVersionQuery

* [autofix.ci] apply automated fixes

* update type declaration to remove on Fetch options

* remove onFetch from version

* update transactions query

* [autofix.ci] apply automated fixes

---------

Co-authored-by: anovazzi1 <[email protected]>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: cristhianzl <[email protected]>

src/frontend/src/App.tsx

@@ -41,6 +41,7 @@ export default function App() {
     isError: isErrorHealth,
     refetch,
   } = useGetHealthQuery();
+
   useEffect(() => {
     if (!dark) {
       document.getElementById("body")!.classList.remove("dark");

src/frontend/src/controllers/API/queries/api-keys/use-post-add-api-key.ts

@@ -1,5 +1,4 @@
 import { useMutationFunctionType } from "@/types/api";
-import { UseMutationResult } from "@tanstack/react-query";
 import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
@@ -15,19 +14,13 @@ export const usePostAddApiKey: useMutationFunctionType<IPostAddApiKey> = (
   const { mutate } = UseRequestProcessor();
 
   const postAddApiKeyFn = async (payload: IPostAddApiKey): Promise<any> => {
-    return await api.post<any>(`${getURL("API_KEY")}/store`, {
+    const res = await api.post<any>(`${getURL("API_KEY")}/store`, {
       api_key: payload.key,
     });
+    return res.data;
   };
 
-  const mutation: UseMutationResult<any, any, IPostAddApiKey> = mutate(
-    ["usePostAddApiKey"],
-    async (payload: IPostAddApiKey) => {
-      const res = await postAddApiKeyFn(payload);
-      return res.data;
-    },
-    options,
-  );
+  const mutation = mutate(["usePostAddApiKey"], postAddApiKeyFn, options);
 
   return mutation;
 };

src/frontend/src/controllers/API/queries/files/use-get-download-images.ts

@@ -16,12 +16,13 @@ export interface DownloadImagesResponse {
 export const useGetDownloadImagesQuery: useQueryFunctionType<
   DownloadImagesQueryParams,
   DownloadImagesResponse
-> = ({ flowId, fileName }) => {
+> = (params) => {
   const { query } = UseRequestProcessor();
 
   const getDownloadImagesFn = async () => {
+    if (!params) return;
     const response = await api.get<DownloadImagesResponse>(
-      `${getURL("FILES")}/images/${flowId}/${fileName}`,
+      `${getURL("FILES")}/images/${params.flowId}/${params.fileName}`,
     );
     return response["data"];
   };

src/frontend/src/controllers/API/queries/transactions/use-get-transactions.ts

@@ -9,6 +9,8 @@ import { UseRequestProcessor } from "../../services/request-processor";
 interface TransactionsQueryParams {
   id: string;
   params?: Record<string, unknown>;
+  mode?: "union" | "intersection";
+  excludedColumns?: string[];
 }
 
 interface TransactionsResponse {
@@ -19,23 +21,16 @@ interface TransactionsResponse {
 export const useGetTransactionsQuery: useQueryFunctionType<
   TransactionsQueryParams,
   TransactionsResponse
-> = ({ id, params }, onFetch) => {
+> = ({ id, excludedColumns, mode, params }, options) => {
+  // Function body remains unchanged
   const { query } = UseRequestProcessor();
 
-  const responseFn = (data: any) => {
-    if (!onFetch) return data;
-    if (typeof onFetch === "function") return onFetch(data);
-    switch (onFetch) {
-      case "TableUnion": {
-        const columns = extractColumnsFromRows(data.data, "union");
-        return { rows: data.data, columns };
-      }
-      case "TableIntersection": {
-        const columns = extractColumnsFromRows(data.data, "intersection");
-        return { rows: data.data, columns };
-      }
-      default:
-        return data;
+  const responseFn = (data: object[]) => {
+    if (mode) {
+      const columns = extractColumnsFromRows(data, mode, excludedColumns);
+      return { rows: data, columns };
+    } else {
+      return data;
     }
   };
 
@@ -46,16 +41,14 @@ export const useGetTransactionsQuery: useQueryFunctionType<
       config["params"] = { ...config["params"], ...params };
     }
 
-    const rows = await api.get<TransactionsResponse>(
-      `${getURL("TRANSACTIONS")}`,
-      config,
-    );
+    const result = await api.get<object[]>(`${getURL("TRANSACTIONS")}`, config);
 
-    return responseFn(rows);
+    return responseFn(result.data);
   };
 
   const queryResult = query(["useGetTransactionsQuery"], getTransactionsFn, {
     placeholderData: keepPreviousData,
+    ...options,
   });
 
   return queryResult;

src/frontend/src/controllers/API/queries/version/use-get-version.ts

@@ -12,30 +12,21 @@ interface versionQueryResponse {
 export const useGetVersionQuery: useQueryFunctionType<
   undefined,
   versionQueryResponse
-> = (_, onFetch) => {
+> = (_, options) => {
   const { query } = UseRequestProcessor();
 
-  const responseFn = (data: versionQueryResponse) => {
-    if (!onFetch) return data;
-    if (typeof onFetch === "function") return onFetch(data);
-    const refreshVersion = useDarkStore.getState().refreshVersion;
-    switch (onFetch) {
-      case "updateState": {
-        return refreshVersion(data.version);
-      }
-      default:
-        return data;
-    }
-  };
-
   const getVersionFn = async () => {
     return await api.get<versionQueryResponse>(`${getURL("VERSION")}`);
   };
 
-  const queryResult = query(["useGetVersionQuery"], async () => {
+  const responseFn = async () => {
     const { data } = await getVersionFn();
-    return responseFn(data);
-  });
+    const refreshVersion = useDarkStore.getState().refreshVersion;
+    refreshVersion(data.version);
+    return data;
+  };
+
+  const queryResult = query(["useGetVersionQuery"], responseFn, { ...options });
 
   return queryResult;
 };

src/frontend/src/modals/flowLogsModal/index.tsx

@@ -16,12 +16,10 @@ export default function FlowLogsModal({
   const [columns, setColumns] = useState<Array<ColDef | ColGroupDef>>([]);
   const [rows, setRows] = useState<any>([]);
 
-  const { data, isLoading, refetch } = useGetTransactionsQuery(
-    {
-      id: currentFlowId,
-    },
-    "TableUnion",
-  );
+  const { data, isLoading, refetch } = useGetTransactionsQuery({
+    id: currentFlowId,
+    mode: "union",
+  });
 
   useEffect(() => {
     if (data) {

src/frontend/src/types/api/index.ts

@@ -1,8 +1,7 @@
 import {
-  MutationFunction,
-  UndefinedInitialDataOptions,
   UseMutationOptions,
   UseMutationResult,
+  UseQueryOptions,
   UseQueryResult,
 } from "@tanstack/react-query";
 import { Edge, Node, Viewport } from "reactflow";
@@ -232,20 +231,25 @@ export type ResponseErrorTypeAPI = {
 export type ResponseErrorDetailAPI = {
   response: { data: { detail: string } };
 };
-
 export type useQueryFunctionType<T = undefined, R = any> = T extends undefined
-  ? (props?: T, onFetch?: ((data: R) => void) | string) => UseQueryResult<R>
-  : (props: T, onFetch?: ((data: R) => void) | string) => UseQueryResult<R>;
+  ? (
+      params?: T,
+      options?: Omit<UseQueryOptions, "queryFn" | "queryKey">,
+    ) => UseQueryResult<R>
+  : (
+      params: T,
+      options?: Omit<UseQueryOptions, "queryFn" | "queryKey">,
+    ) => UseQueryResult<R>;
 
 export type QueryFunctionType = (
-  queryKey: UndefinedInitialDataOptions["queryKey"],
-  queryFn: UndefinedInitialDataOptions["queryFn"],
-  options?: Omit<UndefinedInitialDataOptions, "queryKey" | "queryFn">,
+  queryKey: UseQueryOptions["queryKey"],
+  queryFn: UseQueryOptions["queryFn"],
+  options?: Omit<UseQueryOptions, "queryKey" | "queryFn">,
 ) => UseQueryResult<any>;
 
 export type MutationFunctionType = (
   mutationKey: UseMutationOptions["mutationKey"],
-  mutationFn: MutationFunction<any, any>,
+  mutationFn: UseMutationOptions<any, any, any>["mutationFn"],
   options?: Omit<UseMutationOptions<any, any>, "mutationFn" | "mutationKey">,
 ) => UseMutationResult<any, any, any, any>;