From ebf8d30ff868dfc9362416da11edf5d6fed3079d Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Tue, 10 Dec 2024 23:46:38 +0800
Subject: [PATCH] fix(entities-shared): persistent cache key should share the
 same ref, expose useFetcherCacheKey

---
 .../entities-shared/src/composables/index.ts  |  3 +-
 .../src/composables/useFetcher.ts             | 30 +++++++++----------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/entities/entities-shared/src/composables/index.ts b/packages/entities/entities-shared/src/composables/index.ts
index 925da912ed..e57d7e7615 100644
--- a/packages/entities/entities-shared/src/composables/index.ts
+++ b/packages/entities/entities-shared/src/composables/index.ts
@@ -3,7 +3,7 @@ import useDebouncedFilter from './useDebouncedFilter'
 import useDeleteUrlBuilder from './useDeleteUrlBuilder'
 import useErrors from './useErrors'
 import useExternalLinkCreator from './useExternalLinkCreator'
-import useFetcher from './useFetcher'
+import useFetcher, { useFetcherCacheKey } from './useFetcher'
 import useFetchUrlBuilder from './useFetchUrlBuilder'
 import useHelpers from './useHelpers'
 import useStringHelpers from './useStringHelpers'
@@ -21,6 +21,7 @@ export default {
   useErrors,
   useExternalLinkCreator,
   useFetcher,
+  useFetcherCacheKey,
   useFetchUrlBuilder,
   useHelpers,
   useStringHelpers,
diff --git a/packages/entities/entities-shared/src/composables/useFetcher.ts b/packages/entities/entities-shared/src/composables/useFetcher.ts
index ea4a248109..350fecfef4 100644
--- a/packages/entities/entities-shared/src/composables/useFetcher.ts
+++ b/packages/entities/entities-shared/src/composables/useFetcher.ts
@@ -1,5 +1,5 @@
-import { ref, toValue, unref, watch } from 'vue'
-import type { MaybeRefOrGetter } from 'vue'
+import { ref, toValue, unref } from 'vue'
+import type { MaybeRefOrGetter, Ref } from 'vue'
 import type {
   FetcherResponse,
   FetcherState,
@@ -13,7 +13,7 @@ import useFetchUrlBuilder from './useFetchUrlBuilder'
 import type { TableDataFetcherParams } from '@kong/kongponents'
 
 // Store cacheIdentifier => fetcherCacheKey globally so that the cache is persisted during the session
-const cacheKeys = new Map<string, number>()
+const cacheKeys = new Map<string, Ref<number>>()
 
 export default function useFetcher(
   config: KonnectBaseTableConfig | KongManagerBaseTableConfig,
@@ -125,20 +125,20 @@ export default function useFetcher(
   }
 
   const cacheId = config.cacheIdentifier
-  const fetcherCacheKey = ref<number>(1)
-  if (cacheId) {
-    if (cacheKeys.has(cacheId)) {
-      fetcherCacheKey.value = cacheKeys.get(cacheId)!
-    } else {
-      cacheKeys.set(cacheId, fetcherCacheKey.value)
-    }
-  }
+  const fetcherCacheKey = useFetcherCacheKey(cacheId)
+
+  return { fetcher, fetcherState: state, fetcherCacheKey }
+}
 
-  watch(fetcherCacheKey, (key) => {
-    if (cacheId) {
+export function useFetcherCacheKey(cacheId?: string) {
+  if (cacheId) {
+    let key = cacheKeys.get(cacheId)
+    if (!key) {
+      key = ref(1)
       cacheKeys.set(cacheId, key)
     }
-  })
+    return key
+  }
 
-  return { fetcher, fetcherState: state, fetcherCacheKey }
+  return ref(1)
 }