modified: frontend/src/components/SqlEditor.tsx

frontend/src/components/SqlEditor.tsx

@@ -13,6 +13,39 @@ interface SqlEditorProps {
   height?: string;
 }
 
+// Cache for table names with 5-minute expiration
+interface TableCache {
+  tables: string[];
+  timestamp: number;
+}
+
+const tablesCache = new Map<string, TableCache>();
+const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes in milliseconds
+
+const getCachedTables = async (databaseId: string): Promise<string[]> => {
+  const cached = tablesCache.get(databaseId);
+  const now = Date.now();
+
+  // Return cached data if it exists and is not expired
+  if (cached && (now - cached.timestamp) < CACHE_DURATION) {
+    return cached.tables;
+  }
+
+  // Fetch fresh data
+  try {
+    const { data } = await databasesApi.getTables(databaseId);
+    tablesCache.set(databaseId, {
+      tables: data.tables,
+      timestamp: now,
+    });
+    return data.tables;
+  } catch (error) {
+    console.error('Failed to fetch table names:', error);
+    // Return cached data if available, even if expired, as fallback
+    return cached?.tables || [];
+  }
+};
+
 export default function SqlEditor({ value, onChange, databaseId, height = '400px' }: SqlEditorProps) {
   const editorRef = useRef<any>(null);
   const monacoRef = useRef<Monaco | null>(null);
@@ -57,11 +90,10 @@ export default function SqlEditor({ value, onChange, databaseId, height = '400px
           { label: 'MIN', kind: monaco.languages.CompletionItemKind.Function, insertText: 'MIN()', range },
         ];
 
-        // Fetch table names from database if databaseId is provided
+        // Fetch table names from database if databaseId is provided (with caching)
         if (databaseId) {
-          try {
+          const tables = await getCachedTables(databaseId);
-            const { data } = await databasesApi.getTables(databaseId);
+          const tableSuggestions = tables.map(table => ({
-            const tableSuggestions = data.tables.map(table => ({
             label: table,
             kind: monaco.languages.CompletionItemKind.Class,
             insertText: table,
@@ -69,9 +101,6 @@ export default function SqlEditor({ value, onChange, databaseId, height = '400px
             range,
           }));
           suggestions = [...suggestions, ...tableSuggestions];
-          } catch (error) {
-            console.error('Failed to fetch table names:', error);
-          }
         }
 
         return { suggestions };