refactor table details queries (indexes, foreign_keys, columns)

frontend/src/services/db/db.hooks.ts

@@ -1,7 +1,13 @@
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { DB_QUERY_KEYS } from "./db.query-keys";
 import { dbService } from "./db.service";
-import type { GetTableDataArgs, GetTablesListArgs } from "./db.types";
+import type {
+  GetTableColumnsArgs,
+  GetTableDataArgs,
+  GetTableForeignKeysArgs,
+  GetTableIndexesArgs,
+  GetTablesListArgs,
+} from "./db.types";
 
 export const useDatabasesListQuery = () => {
   return useQuery({
@@ -38,27 +44,36 @@ export const useTableDataQuery = (args: GetTableDataArgs) => {
   });
 };
 
-export const useTableColumnsQuery = (args: { name?: string }) => {
+export const useTableColumnsQuery = (args: GetTableColumnsArgs) => {
   return useQuery({
     queryKey: [DB_QUERY_KEYS.TABLES.COLUMNS, args],
-    queryFn: () => dbService.getTableColumns(args.name ?? ""),
-    placeholderData: keepPreviousData,
-    enabled: !!args.name,
+    queryFn: () => dbService.getTableColumns(args),
+    placeholderData: (previousData, previousQuery) => {
+      if (
+        typeof previousQuery?.queryKey[1] !== "string" &&
+        (previousQuery?.queryKey[1].dbName !== args.dbName ||
+          previousQuery?.queryKey[1].tableName !== args.tableName)
+      ) {
+        return undefined;
+      }
+      return previousData;
+    },
+    enabled: !!args.tableName && !!args.dbName,
   });
 };
 
-export const useTableIndexesQuery = (args: { name?: string }) => {
+export const useTableIndexesQuery = (args: GetTableIndexesArgs) => {
   return useQuery({
     queryKey: [DB_QUERY_KEYS.TABLES.INDEXES, args],
-    queryFn: () => dbService.getTableIndexes(args.name ?? ""),
-    enabled: !!args.name,
+    queryFn: () => dbService.getTableIndexes(args),
+    enabled: !!args.tableName && !!args.dbName,
   });
 };
 
-export const useTableForeignKeysQuery = (args: { name?: string }) => {
+export const useTableForeignKeysQuery = (args: GetTableForeignKeysArgs) => {
   return useQuery({
     queryKey: [DB_QUERY_KEYS.TABLES.FOREIGN_KEYS, args],
-    queryFn: () => dbService.getTableForeignKeys(args.name ?? ""),
-    enabled: !!args.name,
+    queryFn: () => dbService.getTableForeignKeys(args),
+    enabled: !!args.tableName && !!args.dbName,
   });
 };

frontend/src/services/db/db.service.ts

@@ -2,8 +2,11 @@ import { getValuable } from "@/lib/utils";
 import { dbInstance } from "@/services/db/db.instance";
 import type {
   DatabasesResponse,
+  GetTableColumnsArgs,
   GetTableDataArgs,
   GetTableDataResponse,
+  GetTableForeignKeysArgs,
+  GetTableIndexesArgs,
   GetTablesListArgs,
   GetTablesListResponse,
   TableColumns,
@@ -32,17 +35,21 @@ class DbService {
       .json<GetTableDataResponse>();
   }
 
-  getTableColumns(name: string) {
-    return dbInstance.get(`api/db/tables/${name}/columns`).json<TableColumns>();
-  }
-
-  getTableIndexes(name: string) {
-    return dbInstance.get(`api/db/tables/${name}/indexes`).json<TableIndexes>();
-  }
-
-  getTableForeignKeys(name: string) {
+  getTableColumns({ dbName, tableName }: GetTableColumnsArgs) {
     return dbInstance
-      .get(`api/db/tables/${name}/foreign-keys`)
+      .get(`api/databases/${dbName}/tables/${tableName}/columns`)
+      .json<TableColumns>();
+  }
+
+  getTableIndexes({ dbName, tableName }: GetTableIndexesArgs) {
+    return dbInstance
+      .get(`api/databases/${dbName}/tables/${tableName}/indexes`)
+      .json<TableIndexes>();
+  }
+
+  getTableForeignKeys({ dbName, tableName }: GetTableForeignKeysArgs) {
+    return dbInstance
+      .get(`api/databases/${dbName}/tables/${tableName}/foreign-keys`)
       .json<TableForeignKeys>();
   }
 }

frontend/src/services/db/db.types.ts

@@ -33,6 +33,12 @@ export type GetTableDataResponse = {
   data: Array<Record<string, any>>;
 };
 
+// Table Columns
+export type GetTableColumnsArgs = {
+  tableName: string;
+  dbName: string;
+};
+
 export type TableColumn = {
   column_name: string;
   data_type: string;
@@ -41,6 +47,12 @@ export type TableColumn = {
 };
 export type TableColumns = TableColumn[];
 
+// Table Indexes
+export type GetTableIndexesArgs = {
+  tableName: string;
+  dbName: string;
+};
+
 export type TableIndexEntry = {
   key: string;
   type: string;
@@ -50,6 +62,11 @@ export type TableIndexEntry = {
 };
 export type TableIndexes = TableIndexEntry[];
 
+// Table Foreign Keys
+export type GetTableForeignKeysArgs = {
+  tableName: string;
+  dbName: string;
+};
 export type TableForeignKey = {
   conname: string;
   deferrable: boolean;