diff --git a/src/lib/requests/CustomCache.ts b/src/lib/requests/CustomCache.ts index b97f2ced16..4fe4cca12a 100644 --- a/src/lib/requests/CustomCache.ts +++ b/src/lib/requests/CustomCache.ts @@ -32,8 +32,19 @@ export class CustomCache { return this.keyToFetchTimestampMap.get(key); } - public getResponseFor(endpoint: string, data: unknown): Response | undefined { + public getResponseFor(endpoint: string, data: unknown, ttl?: number): Response | undefined { const key = this.getKeyFor(endpoint, data); + + const isTtlReached = ttl && Date.now() - (this.getFetchTimestampFor(endpoint, data) ?? 0) >= ttl; + if (isTtlReached) { + this.keyToResponseMap.delete(key); + } + return this.keyToResponseMap.get(key) as Response; } + + public clear(): void { + this.keyToResponseMap.clear(); + this.keyToFetchTimestampMap.clear(); + } } diff --git a/src/lib/requests/RequestManager.ts b/src/lib/requests/RequestManager.ts index 49d51228e8..aaa7d09219 100644 --- a/src/lib/requests/RequestManager.ts +++ b/src/lib/requests/RequestManager.ts @@ -834,12 +834,29 @@ export class RequestManager { public useExtensionListFetch( options?: MutationHookOptions, ): AbortableApolloUseMutationResponse { - return this.doRequest( + const cacheKey = 'useExtensionListFetch'; + + const [mutate, result] = this.doRequest( GQLMethod.USE_MUTATION, GET_EXTENSIONS_FETCH, {}, { refetchQueries: [GET_EXTENSIONS], ...options }, ); + + if (result.data?.fetchExtensions.extensions) { + this.cache.cacheResponse(cacheKey, undefined, result); + } + const cachedResult = this.cache.getResponseFor(cacheKey, undefined, 1000 * 60); + + const wrappedMutate = (mutateOptions: Parameters[0]) => { + if (cachedResult) { + return cachedResult; + } + + return mutate(mutateOptions); + }; + + return [wrappedMutate, cachedResult ?? result]; } public installExternalExtension( @@ -1583,6 +1600,7 @@ export class RequestManager { result.response.then(() => { this.graphQLClient.client.cache.reset(); + this.cache.clear(); }); return result; diff --git a/src/screens/Extensions.tsx b/src/screens/Extensions.tsx index e11a52e304..6ab210413c 100644 --- a/src/screens/Extensions.tsx +++ b/src/screens/Extensions.tsx @@ -100,16 +100,11 @@ export function Extensions() { const isMobile = useMediaQuery(theme.breakpoints.down('sm')); const [query] = useQueryParam('query', StringParam); - const [extensionsTimestamp, setExtensionsTimestamp] = useLocalStorage('extensionsTimestamp', 0); - const [fetchExtensions, { loading: isFetching }] = requestManager.useExtensionListFetch(); - const { data, loading: isLoading } = requestManager.useGetExtensionList(); - const allExtensions = data?.extensions.nodes; + const [fetchExtensions, { data, loading: isLoading, called }] = requestManager.useExtensionListFetch(); + const allExtensions = data?.fetchExtensions.extensions; useEffect(() => { - const updateExtensionsList = Date.now() - extensionsTimestamp >= 1000 * 60; // update list in case it's older than 1 minute - if (updateExtensionsList) { - fetchExtensions().catch(() => setExtensionsTimestamp(Date.now())); - } + fetchExtensions(); }, []); const filteredExtensions = useMemo( @@ -187,7 +182,7 @@ export function Extensions() { }; }, []); - if (isLoading || isFetching) { + if (!allExtensions && (isLoading || !called)) { return ; }