Feature/extensions always use fetch mutation to get list (#440)

* Reset the cache after importing a backup

* Add option to delete cached data after ttl is reached

* Always use mutation to get extensions list

src/lib/requests/CustomCache.ts

@@ -32,8 +32,19 @@ export class CustomCache {
         return this.keyToFetchTimestampMap.get(key);
     }
 
-    public getResponseFor<Response = any>(endpoint: string, data: unknown): Response | undefined {
+    public getResponseFor<Response = any>(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();
+    }
 }

src/lib/requests/RequestManager.ts

@@ -834,12 +834,29 @@ export class RequestManager {
     public useExtensionListFetch(
         options?: MutationHookOptions<GetExtensionsFetchMutation, GetExtensionsFetchMutationVariables>,
     ): AbortableApolloUseMutationResponse<GetExtensionsFetchMutation, GetExtensionsFetchMutationVariables> {
-        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<typeof mutate>[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;

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, { data, loading: isLoading, called }] = requestManager.useExtensionListFetch();
-    const [fetchExtensions, { loading: isFetching }] = requestManager.useExtensionListFetch();
+    const allExtensions = data?.fetchExtensions.extensions;
-    const { data, loading: isLoading } = requestManager.useGetExtensionList();
-    const allExtensions = data?.extensions.nodes;
 
     useEffect(() => {
-        const updateExtensionsList = Date.now() - extensionsTimestamp >= 1000 * 60; // update list in case it's older than 1 minute
+        fetchExtensions();
-        if (updateExtensionsList) {
-            fetchExtensions().catch(() => setExtensionsTimestamp(Date.now()));
-        }
     }, []);
 
     const filteredExtensions = useMemo(
@@ -187,7 +182,7 @@ export function Extensions() {
         };
     }, []);
 
-    if (isLoading || isFetching) {
+    if (!allExtensions && (isLoading || !called)) {
         return <LoadingPlaceholder />;
     }