Fix sticky courses

assets/vue/views/user/courses/List.vue

@@ -1,6 +1,8 @@
 <template>
   <StickyCourses />
 
+  <hr>
+
   <div v-if="isLoading" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
     <Skeleton height="16rem" />
     <Skeleton class="hidden md:block" height="16rem" />

assets/vue/views/user/courses/StickyCourses.vue

@@ -14,20 +14,24 @@
 
 <script setup>
 import CourseCardList from '../../../components/course/CourseCardList.vue'
-import {computed} from "vue"
+import { computed, ref, watchEffect } from "vue"
 import {useStore} from 'vuex'
 import {GET_STICKY_COURSES} from "../../../graphql/queries/Course"
-import {useSession} from "../sessions/session"
+import { useQuery } from "@vue/apollo-composable"
 
 const store = useStore()
 
-let user = computed(() => store.getters['security/getUser'])
-const {sessions: result} = useSession(user, null, null, GET_STICKY_COURSES)
+let isAuthenticated = computed(() => store.getters['security/isAuthenticated'])
 
-const courses = computed(() => {
-  if (result.value === null) {
-    return []
-  }
-  return result.value
-})
+const queryResponse = ref({})
+
+if (isAuthenticated.value) {
+  const { result } = useQuery(GET_STICKY_COURSES)
+
+  watchEffect(() => {
+    queryResponse.value = result.value
+  })
+}
+
+const courses = computed(() => queryResponse.value?.courses?.edges?.map(({node}) => node) ?? [])
 </script>