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() +const cacheKeys = new Map>() export default function useFetcher( config: KonnectBaseTableConfig | KongManagerBaseTableConfig, @@ -125,20 +125,20 @@ export default function useFetcher( } const cacheId = config.cacheIdentifier - const fetcherCacheKey = ref(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) }