ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use reactive course query to be able to work with cache

This commit is contained in:
Ramon Wenger 2024-07-10 17:59:41 +02:00 committed by Christian Cueni
parent c32520548c
commit 6a827ae0ae
1 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
View File

@ -14,8 +14,9 @@ import {
useCurrentCourseSession, useCurrentCourseSession,
} from "@/composables"; } from "@/composables";
import CourseSessionDueDatesList from "@/components/dueDates/CourseSessionDueDatesList.vue"; import CourseSessionDueDatesList from "@/components/dueDates/CourseSessionDueDatesList.vue";
import { useMutation } from "@urql/vue"; import { useMutation, useQuery } from "@urql/vue";
import { UPDATE_COURSE_PROFILE_MUTATION } from "@/graphql/mutations"; import { UPDATE_COURSE_PROFILE_MUTATION } from "@/graphql/mutations";
import { COURSE_QUERY } from "@/graphql/queries";
const props = defineProps<{ const props = defineProps<{
courseSlug: string; courseSlug: string;
@ -36,7 +37,21 @@ const course = computed(() => lpQueryResult.course.value);
const courseSession = useCurrentCourseSession(); const courseSession = useCurrentCourseSession();
const filter = ref(""); // todo: we do not use the courseStore, because the returned object has lost its reactivity and does not reflect cache changes. maybe this could be fixed in there, then we can use the same object here
// todo: this could maybe go somewhere else, but useQuery must be used inside of a setup function. is there a better place?
const courseReactiveResult = useQuery({
query: COURSE_QUERY,
variables: { slug: props.courseSlug },
});
const courseReactive = computed(() => courseReactiveResult.data.value?.course);
const courseSessionUser = computed(() => {
return courseReactive.value?.course_session_users.find(
(e) => e?.course_session.id === courseSession.value.id
);
});
const filter = computed(() => {
return courseSessionUser.value?.chosen_profile || "";
});
const { inProgressCirclesCount, circlesCount } = useCourseCircleProgress( const { inProgressCirclesCount, circlesCount } = useCourseCircleProgress(
lpQueryResult.circles lpQueryResult.circles