Add caching mechanism to API calls

availabili.tf/src/stores/client.ts

@@ -8,6 +8,39 @@ export const useClientStore = defineStore("client", () => {
 
   const calls = new Map<string, Promise<any>>();
 
+  type CachedValue<T> = {
+    value: T,
+    timestamp: number,
+  };
+
+  const cached = new Map<string, any>();
+
+  function callCached<T>(
+    key: string,
+    apiCall: () => CancelablePromise<T>,
+    maxLifetime: number = 2000,
+    thenOnce?: (result: T) => T,
+    catchOnce?: (error: any) => any,
+    finallyOnce?: () => void,
+  ): Promise<T> {
+    if (cached.has(key)) {
+      const cachedValue = cached.get(key) as CachedValue<T>;
+      if (Date.now() - cachedValue.timestamp < maxLifetime) {
+        return Promise.resolve(cachedValue.value);
+      }
+    }
+
+    // cache miss
+    let promise = call(key, apiCall, thenOnce, catchOnce, finallyOnce);
+    promise.then((result) => {
+      cached.set(key, {
+        value: result,
+        timestamp: Date.now(),
+      });
+    });
+    return promise;
+  }
+
   function call<T>(
     key: string,
     apiCall: () => CancelablePromise<T>,
@@ -17,11 +50,15 @@ export const useClientStore = defineStore("client", () => {
   ): Promise<T> {
     console.log("Fetching call " + key);
     if (!calls.has(key)) {
+      console.log("Making new call " + key);
       const promise = apiCall();
       calls.set(key, promise);
 
       // remove from calls once completed
-      promise.finally(() => calls.delete(key));
+      promise.finally(() => {
+        console.log("Call " + key + " completed");
+        calls.delete(key);
+      });
 
       // only execute this "then" once if the call was just freshly made
       if (thenOnce) {
@@ -37,6 +74,8 @@ export const useClientStore = defineStore("client", () => {
       }
 
       return promise;
+    } else {
+      console.log("Returning concurrent call " + key);
     }
     return calls.get(key) as Promise<T>;
   }
@@ -44,6 +83,7 @@ export const useClientStore = defineStore("client", () => {
   return {
     client,
     call,
+    callCached,
     calls,
   }
 });

availabili.tf/src/stores/teams.ts

@@ -33,7 +33,7 @@ export const useTeamsStore = defineStore("teams", () => {
   }
 
   async function fetchTeam(id: number) {
-    const response = await clientStore.call(
+    const response = await clientStore.callCached(
       fetchTeam.name,
       () => client.default.getTeam(id)
     );
@@ -42,7 +42,7 @@ export const useTeamsStore = defineStore("teams", () => {
   }
 
   async function fetchTeamMembers(id: number) {
-    const response = await clientStore.call(
+    const response = await clientStore.callCached(
       fetchTeamMembers.name,
       () => client.default.getTeamMembers(id)
     );