#2

packages/datalib/src/GridDisplay.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { GridConfig, GridCache, GridConfigColumns } from './GridConfig';
+import { GridConfig, GridCache, GridConfigColumns, createGridCache } from './GridConfig';
 import { ForeignKeyInfo, TableInfo, ColumnInfo, DbType, EngineDriver, NamedObjectInfo } from '@dbgate/types';
 import { parseFilter, getFilterType } from '@dbgate/filterparser';
 import { filterName } from './filterName';
@@ -86,7 +86,8 @@ export abstract class GridDisplay {
 
   reload() {
     this.setCache((cache) => ({
-      ...cache,
+      // ...cache,
+      ...createGridCache(),
       refreshTime: new Date().getTime(),
     }));
   }

packages/datalib/src/TableGridDisplay.ts

@@ -7,14 +7,16 @@ import {
   ReferenceActionResult,
   DisplayedColumnInfo,
 } from './GridDisplay';
-import { TableInfo, EngineDriver, ViewInfo, ColumnInfo } from '@dbgate/types';
+import { TableInfo, EngineDriver, ViewInfo, ColumnInfo, NamedObjectInfo } from '@dbgate/types';
-import { GridConfig, GridCache } from './GridConfig';
+import { GridConfig, GridCache, createGridCache } from './GridConfig';
 import { Expression, Select, treeToSql, dumpSqlSelect } from '@dbgate/sqltree';
 import { filterName } from './filterName';
 
 export class TableGridDisplay extends GridDisplay {
+  public table: TableInfo;
+
   constructor(
-    public table: TableInfo,
+    public tableName: NamedObjectInfo,
     driver: EngineDriver,
     config: GridConfig,
     setConfig: (config: GridConfig) => void,
@@ -23,15 +25,21 @@ export class TableGridDisplay extends GridDisplay {
     protected getTableInfo: ({ schemaName, pureName }) => Promise<TableInfo>
   ) {
     super(config, setConfig, cache, setCache, driver);
-    this.columns = this.getDisplayColumns(table, []);
+
+    this.table = this.cache.tables.basetbl;
+    if (!this.table) {
+      this.loadTableIntoCache('basetbl', tableName);
+    }
+
+    this.columns = this.getDisplayColumns(this.table, []);
     this.filterable = true;
     this.sortable = true;
     this.editable = true;
-    this.baseTable = table;
+    this.baseTable = this.table;
-    if (table && table.columns) {
+    if (this.table && this.table.columns) {
-      this.changeSetKeyFields = table.primaryKey
+      this.changeSetKeyFields = this.table.primaryKey
-        ? table.primaryKey.columns.map((x) => x.columnName)
+        ? this.table.primaryKey.columns.map((x) => x.columnName)
-        : table.columns.map((x) => x.columnName);
+        : this.table.columns.map((x) => x.columnName);
     }
   }
 
@@ -160,10 +168,7 @@ export class TableGridDisplay extends GridDisplay {
     return [];
   }
 
-  requireFkTarget(column: DisplayColumn) {
+  loadTableIntoCache(key, { pureName, schemaName }) {
-    const { uniqueName, foreignKey } = column;
-    const pureName = foreignKey.refTableName;
-    const schemaName = foreignKey.refSchemaName;
     if (this.cache.loadingTables.find((x) => x.pureName == pureName && x.schemaName == schemaName)) return;
 
     this.setCache((cache) => ({
@@ -178,12 +183,19 @@ export class TableGridDisplay extends GridDisplay {
         loadingTables: cache.loadingTables.filter((x) => x.schemaName != schemaName || x.pureName != pureName),
         tables: {
           ...cache.tables,
-          [uniqueName]: table,
+          [key]: table,
         },
       }));
     });
   }
 
+  requireFkTarget(column: DisplayColumn) {
+    const { uniqueName, foreignKey } = column;
+    const pureName = foreignKey.refTableName;
+    const schemaName = foreignKey.refSchemaName;
+    this.loadTableIntoCache(uniqueName, { pureName, schemaName });
+  }
+
   processReferences(select: Select, displayedColumnInfo: DisplayedColumnInfo): ReferenceActionResult {
     const action = combineReferenceActions(
       this.addJoinsFromExpandedColumns(select, this.columns, 'basetbl', displayedColumnInfo),
@@ -194,6 +206,7 @@ export class TableGridDisplay extends GridDisplay {
   }
 
   createSelect() {
+    if (!this.table) return null;
     const select = this.createSelectBase(this.table, this.table.columns);
     return select;
   }

packages/web/src/datagrid/DataGridCore.js

@@ -376,6 +376,9 @@ export default function DataGridCore(props) {
     });
   };
 
+  const insertedRows = getChangeSetInsertedRows(changeSet, display.baseTable);
+  const rowCountNewIncluded = loadedRows.length + insertedRows.length;
+
   React.useEffect(() => {
     if (
       !isLoadedAll &&
@@ -472,9 +475,6 @@ export default function DataGridCore(props) {
     return <ErrorInfo message={errorMessage} />;
   }
 
-  const insertedRows = getChangeSetInsertedRows(changeSet, display.baseTable);
-  const rowCountNewIncluded = loadedRows.length + insertedRows.length;
-
   const handleRowScroll = (value) => {
     setFirstVisibleRowScrollIndex(value);
   };
@@ -493,7 +493,7 @@ export default function DataGridCore(props) {
         revertRowChanges={revertRowChanges}
         deleteSelectedRows={deleteSelectedRows}
         insertNewRow={insertNewRow}
-        reload={reload}
+        reload={() => display.reload()}
       />
     );
   };
@@ -778,7 +778,7 @@ export default function DataGridCore(props) {
   function handleGridKeyDown(event) {
     if (event.keyCode == keycodes.f5) {
       event.preventDefault();
-      reload();
+      display.reload();
     }
 
     if (event.keyCode == keycodes.s && event.ctrlKey) {
@@ -1116,7 +1116,7 @@ export default function DataGridCore(props) {
         tabVisible &&
         ReactDOM.createPortal(
           <DataGridToolbar
-            reload={reload}
+            reload={() => display.reload()}
             save={handleSave}
             changeSetState={changeSetState}
             dispatchChangeSet={dispatchChangeSet}

packages/web/src/tabs/TableDataTab.js

@@ -11,11 +11,9 @@ import usePropsCompare from '../utility/usePropsCompare';
 import { useUpdateDatabaseForTab } from '../utility/globalState';
 
 export default function TableDataTab({ conid, database, schemaName, pureName, tabVisible, toolbarPortalRef }) {
-  const tableInfo = useTableInfo({ conid, database, schemaName, pureName });
   const [config, setConfig] = React.useState(createGridConfig());
   const [cache, setCache] = React.useState(createGridCache());
   const [changeSetState, dispatchChangeSet] = useUndoReducer(createChangeSet());
-
   useUpdateDatabaseForTab(tabVisible, conid, database);
   const connection = useConnectionInfo({ conid });
   // console.log('GOT CONNECTION', connection);
@@ -24,12 +22,18 @@ export default function TableDataTab({ conid, database, schemaName, pureName, ta
 
   const display = React.useMemo(
     () =>
-      tableInfo && connection
+      connection
-        ? new TableGridDisplay(tableInfo, engines(connection), config, setConfig, cache, setCache, (name) =>
+        ? new TableGridDisplay(
-            getTableInfo({ conid, database, ...name })
+            { schemaName, pureName },
+            engines(connection),
+            config,
+            setConfig,
+            cache,
+            setCache,
+            (name) => getTableInfo({ conid, database, ...name })
           )
         : null,
-    [tableInfo, connection, config, cache]
+    [connection, config, cache]
   );
 
   if (!display) return null;