Refactor getting data with promise cache

client/src/fetchHelpers.ts

@@ -56,3 +56,17 @@ export const itPost = (url: RequestInfo, data: unknown, options: RequestInit = {
 export const itGet = (url: RequestInfo) => {
   return itPost(url, {}, { method: "GET" });
 };
+
+const itGetPromiseCache = new Map<string, Promise<any>>();
+
+export function bustItGetCache() {
+  itGetPromiseCache.clear();
+}
+
+export const itGetCached = (url: RequestInfo): Promise<any> => {
+  if (!itGetPromiseCache.has(url.toString())) {
+    itGetPromiseCache.set(url.toString(), itGet(url));
+  }
+
+  return itGetPromiseCache.get(url.toString()) as Promise<any>;
+};

client/src/stores/competence.ts

@@ -1,4 +1,4 @@
-import { itGet } from "@/fetchHelpers";
+import { itGetCached } from "@/fetchHelpers";
 import { useCompletionStore } from "@/stores/completion";
 import type {
   BaseCourseWagtailPage,
@@ -95,7 +95,7 @@ export const useCompetenceStore = defineStore({
         await this.parseCompletionData();
         return this.competenceProfilePage;
       }
-      const competenceProfilePageData = await itGet(`/api/course/page/${slug}/`);
+      const competenceProfilePageData = await itGetCached(`/api/course/page/${slug}/`);
 
       if (!competenceProfilePageData) {
         throw `No competenceProfilePageData found with: ${slug}`;

client/src/stores/completion.ts

@@ -1,4 +1,4 @@
-import { itGet, itPost } from "@/fetchHelpers";
+import { itGetCached, itPost } from "@/fetchHelpers";
 import type { BaseCourseWagtailPage, CourseCompletion } from "@/types";
 import { defineStore } from "pinia";
 
@@ -19,7 +19,7 @@ export const useCompletionStore = defineStore({
       if (this.completionData && !reload) {
         return this.completionData;
       }
-      const completionData = await itGet(`/api/course/completion/${courseId}/`);
+      const completionData = await itGetCached(`/api/course/completion/${courseId}/`);
 
       if (!completionData) {
         throw `No completionData found with: ${courseId}`;

client/src/stores/courseSessions.ts

@@ -1,4 +1,4 @@
-import { itGet } from "@/fetchHelpers";
+import { itGetCached } from "@/fetchHelpers";
 import type { CourseSession } from "@/types";
 import log from "loglevel";
 import { defineStore } from "pinia";
@@ -6,7 +6,6 @@ import { ref } from "vue";
 
 export const useCourseSessionsStore = defineStore("courseSessions", () => {
   const courseSessions = ref<CourseSession[] | undefined>(undefined);
-  let loadPromise: Promise<CourseSession[]> | undefined = undefined;
 
   async function loadCourseSessionsData(reload = false) {
     log.debug("loadCourseSessionsData called");
@@ -14,12 +13,7 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
       return courseSessions.value;
     }
 
-    if (!loadPromise) {
-      loadPromise = itGet(`/api/course/sessions/`);
-    }
-
-    const courseSessionsData = await loadPromise;
-
+    const courseSessionsData = await itGetCached(`/api/course/sessions/`);
     if (!courseSessionsData) {
       throw `No courseSessionData found for user`;
     }

client/src/stores/learningPath.ts

@@ -1,4 +1,4 @@
-import { itGet } from "@/fetchHelpers";
+import { itGetCached } from "@/fetchHelpers";
 import { LearningPath } from "@/services/learningPath";
 import { useCompletionStore } from "@/stores/completion";
 import { defineStore } from "pinia";
@@ -23,7 +23,7 @@ export const useLearningPathStore = defineStore({
       if (this.learningPath && !reload) {
         return this.learningPath;
       }
-      const learningPathData = await itGet(`/api/course/page/${slug}/`);
+      const learningPathData = await itGetCached(`/api/course/page/${slug}/`);
       const completionData = await completionStore.loadCompletionData(
         learningPathData.course.id
       );

client/src/stores/user.ts

@@ -1,6 +1,6 @@
 import * as log from "loglevel";
 
-import { itGet, itPost } from "@/fetchHelpers";
+import { bustItGetCache, itGetCached, itPost } from "@/fetchHelpers";
 import { useAppStore } from "@/stores/app";
 import { defineStore } from "pinia";
 
@@ -43,6 +43,8 @@ export const useUserStore = defineStore({
           .then((data) => {
             this.$state = data;
             this.loggedIn = true;
+            log.debug("bust cache");
+            bustItGetCache();
             log.debug(`redirect to ${next}`);
             window.location.href = next;
           })
@@ -68,7 +70,7 @@ export const useUserStore = defineStore({
     },
     fetchUser() {
       const appStore = useAppStore();
-      itGet("/api/core/me/")
+      itGetCached("/api/core/me/")
         .then((data) => {
           this.$state = data;
           this.loggedIn = true;