fix(gui-v2): avoid duplicate meta api invocation

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue

@@ -66,9 +66,9 @@ const unlinkRef = async (rec: Record<string, any>) => {
     <template v-if="!isForm">
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="cells">
-          <ItemChip v-for="(cell, i) of cells" :key="i" :item="ch" :value="cell.value" @unlink="unlinkRef(cell.item)" />
+          <ItemChip v-for="(cell, i) of cells" :key="i" :item="cell.item" :value="cell.value" @unlink="unlinkRef(cell.item)" />
 
-          <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
+          <span v-if="cells?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
         </template>
       </div>
 

packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { Modal } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
-import { useLTARStoreOrThrow, useSmartsheetRowStoreOrThrow, useVModel, watch } from '#imports'
+import { computed, useLTARStoreOrThrow, useSmartsheetRowStoreOrThrow, useVModel, watch } from '#imports'
 import { ColumnInj, IsFormInj } from '~/context'
 
 const props = defineProps<{ modelValue?: boolean }>()
 const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
-const isForm = inject(IsFormInj, false)
+const isForm = ref(inject(IsFormInj, false))
 const column = inject(ColumnInj)
 
 const {
@@ -25,11 +25,15 @@ const {
 
 const { isNew, state, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 
-watch([vModel, isForm], (nextVal) => {
-  if (nextVal[0] || nextVal[1]) {
-    loadChildrenList()
-  }
-})
+watch(
+  [vModel, isForm],
+  (nextVal) => {
+    if (nextVal[0] || nextVal[1]) {
+      loadChildrenList()
+    }
+  },
+  { immediate: true },
+)
 
 const unlinkRow = async (row: Record<string, any>) => {
   if (isNew.value) {
@@ -41,7 +45,7 @@ const unlinkRow = async (row: Record<string, any>) => {
 }
 
 const container = computed(() =>
-  isForm
+  isForm?.value
     ? h('div', {
         class: 'w-full p-2',
       })

packages/nc-gui-v2/composables/useMetas.ts

@@ -1,3 +1,4 @@
+import type { WatchStopHandle } from 'vue'
 import type { TableInfoType, TableType } from 'nocodb-sdk'
 import { useProject } from './useProject'
 import { useNuxtApp, useState } from '#app'
@@ -7,24 +8,55 @@ export function useMetas() {
   const { tables } = useProject()
 
   const metas = useState<{ [idOrTitle: string]: TableType | any }>('metas', () => ({}))
+  const loadingState = useState<Record<string, boolean>>('metas-loading-state', () => ({}))
 
   const getMeta = async (tableIdOrTitle: string, force = false): Promise<TableType | TableInfoType | null> => {
-    if (!force && metas.value[tableIdOrTitle as string]) return metas.value[tableIdOrTitle as string]
+    if (!force && metas.value[tableIdOrTitle]) return metas.value[tableIdOrTitle]
 
     const modelId = (tables.value.find((t) => t.title === tableIdOrTitle || t.id === tableIdOrTitle) || {}).id
+
     if (!modelId) {
       console.warn(`Table '${tableIdOrTitle}' is not found in the table list`)
       return null
     }
 
-    const model = await $api.dbTable.read(modelId)
+    /** wait until loading is finished if requesting same meta */
+    if (!force) {
+      await new Promise((resolve) => {
+        let unwatch: WatchStopHandle
+
+        const timeout = setTimeout(() => {
+          unwatch?.()
+          clearTimeout(timeout)
+          resolve(null)
+        }, 20000)
+
+        unwatch = watch(
+          () => loadingState.value[modelId],
+          (isLoading) => {
+            if (!isLoading) {
+              clearTimeout(timeout)
+              resolve(null)
+              unwatch?.()
+            }
+          },
+          { immediate: true },
+        )
+      })
+      if (metas.value[modelId]) return metas.value[modelId]
+    }
+
+    loadingState.value[modelId] = true
 
+    const model = await $api.dbTable.read(modelId)
     metas.value = {
       ...metas.value,
       [model.id!]: model,
       [model.title]: model,
     }
 
+    loadingState.value[modelId] = false
+
     return model
   }