refactor table details queries (indexes, foreign_keys, columns)

frontend/src/components/db-table-view/data-table.tsx

@@ -48,7 +48,7 @@ export const DataTable = ({
   onPageIndexChange: (pageIndex: number) => void;
   onPageSizeChange: (pageSize: number) => void;
 }) => {
-  const { data: details } = useTableColumnsQuery({ name: tableName });
+  const { data: details } = useTableColumnsQuery({ dbName, tableName });
   const { data } = useTableDataQuery({
     tableName,
     dbName,

frontend/src/routes/db/$dbName/tables/$tableName/index.tsx

@@ -79,17 +79,20 @@ const tableForeignKeysColumns = [
 ];
 
 function TableDetailsTable() {
-  const { tableName: name } = Route.useParams();
-  const { data: tableColumns } = useTableColumnsQuery({ name });
-  const { data: tableIndexes } = useTableIndexesQuery({ name });
-  const { data: tableForeignKeys } = useTableForeignKeysQuery({ name });
+  const { tableName, dbName } = Route.useParams();
+  const { data: tableColumns } = useTableColumnsQuery({ tableName, dbName });
+  const { data: tableIndexes } = useTableIndexesQuery({ tableName, dbName });
+  const { data: tableForeignKeys } = useTableForeignKeysQuery({
+    tableName,
+    dbName,
+  });
 
   return (
     <div className={"p-3 w-layout"}>
       <div className={"flex flex-col gap-4 flex-1 max-h-full pb-3"}>
         <div className={"flex gap-4 items-center justify-between"}>
           <h1 className={"text-2xl font-bold flex items-center gap-2"}>
-            <Table2 /> {name}
+            <Table2 /> {tableName}
           </h1>
           <Link
             from={Route.fullPath}

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;