fix(entities-shared): persistent cache key should share the same ref,…

… expose useFetcherCacheKey (#1844)

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,

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)
 }