Recode `useLearningPath` to use graphql query programatically

client/src/composables.ts

@@ -1,3 +1,4 @@
+import { graphqlClient } from "@/graphql/client";
 import { COURSE_SESSION_DETAIL_QUERY, LEARNING_PATH_QUERY } from "@/graphql/queries";
 import { circleFlatChildren, circleFlatLearningContents } from "@/services/circle";
 import { useCompletionStore } from "@/stores/completion";
@@ -137,16 +138,16 @@ export function flatCircles(learningPath: LearningPathType) {
   return learningPath.topics.flatMap((t) => t.circles);
 }
 
-export function useLearningPathQuery(courseSlug: string) {
-  const queryResult = useQuery({
-    query: LEARNING_PATH_QUERY,
-    variables: {
-      slug: `${courseSlug}-lp`,
-    },
-  });
+export function useLearningPath(courseSlug: string) {
+  const learningPath = ref<LearningPathType | undefined>(undefined);
 
-  const learningPath = computed(() => {
-    return queryResult.data.value?.learning_path as LearningPathType | undefined;
+  // urql.useQuery is not meant to be used programmatically, so we use graphqlClient.query instead
+  const resultPromise = graphqlClient
+    .query(LEARNING_PATH_QUERY, { slug: `${courseSlug}-lp` })
+    .toPromise();
+
+  resultPromise.then((result) => {
+    learningPath.value = result.data?.learning_path as LearningPathType;
   });
 
   const circles = computed(() => {
@@ -162,20 +163,7 @@ export function useLearningPathQuery(courseSlug: string) {
     });
   }
 
-  const dataLoaded = ref(false);
-
-  function waitForData() {
-    return new Promise((resolve) => {
-      watchEffect(() => {
-        if (queryResult.data.value) {
-          dataLoaded.value = true;
-          resolve(queryResult.data.value);
-        }
-      });
-    });
-  }
-
-  return { ...queryResult, waitForData, learningPath, circles, findCircle };
+  return { resultPromise, learningPath, circles, findCircle };
 }
 
 export function useLearningPathWithCompletion(
@@ -193,28 +181,20 @@ export function useLearningPathWithCompletion(
     courseSessionId = useCurrentCourseSession().value.id;
   }
 
-  const lpQueryResult = useLearningPathQuery(courseSlug);
+  const learningPathResult = useLearningPath(courseSlug);
   const completionStore = useCompletionStore();
   const nextLearningContent = ref<LearningContentWithCompletion | null>(null);
 
   function updateCompletionData() {
     if (userId && courseSessionId) {
-      completionStore
-        .loadCourseSessionCompletionData(courseSessionId, userId)
-        .then(_parseCompletionData);
+      return completionStore.loadCourseSessionCompletionData(courseSessionId, userId);
     }
+    return Promise.resolve([]);
   }
 
-  watchEffect(() => {
-    if (lpQueryResult.data.value) {
-      // load completion data when learning path data is loaded
-      updateCompletionData();
-    }
-  });
-
   function _parseCompletionData(completionData: CourseCompletion[]) {
-    if (lpQueryResult.circles.value) {
-      lpQueryResult.circles.value.forEach((circle) => {
+    if (learningPathResult.circles.value) {
+      learningPathResult.circles.value.forEach((circle) => {
         circleFlatChildren(circle).forEach((lc) => {
           const pageIndex = completionData.findIndex((e) => {
             return e.page_id === lc.id;
@@ -229,9 +209,9 @@ export function useLearningPathWithCompletion(
     }
 
     // FIXME calculate nextLearningContent
-    if (lpQueryResult.circles.value?.length) {
+    if (learningPathResult.circles.value?.length) {
       nextLearningContent.value = circleFlatLearningContents(
-        lpQueryResult.circles.value[0]
+        learningPathResult.circles.value[0]
       )[0];
     }
   }
@@ -251,8 +231,19 @@ export function useLearningPathWithCompletion(
     }
   }
 
+  async function _start() {
+    Promise.all([learningPathResult.resultPromise, updateCompletionData()]).then(
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      ([_queryResults, completionData]) => {
+        _parseCompletionData(completionData);
+      }
+    );
+  }
+
+  _start();
+
   return {
-    ...lpQueryResult,
+    ...learningPathResult,
     updateCompletionData,
     markCompletion,
     nextLearningContent,

client/src/stores/cockpit.ts

@@ -1,4 +1,4 @@
-import { useLearningPathQuery } from "@/composables";
+import { useLearningPath } from "@/composables";
 import { useUserStore } from "@/stores/user";
 import type { CircleLight, CourseSessionUser, ExpertSessionUser } from "@/types";
 import log from "loglevel";
@@ -59,8 +59,8 @@ async function courseCircles(
   const userStore = useUserStore();
   // Return all circles from learning path for admin users
   if (userStore.is_superuser) {
-    const lpQueryResult = useLearningPathQuery(courseSlug);
-    await lpQueryResult.waitForData();
+    const lpQueryResult = useLearningPath(courseSlug);
+    await lpQueryResult.resultPromise;
 
     return (lpQueryResult.circles.value ?? []).map((c) => {
       return {