Refactor module query in one component

client/src/components/modules/ModuleSubNavigation.vue

@@ -7,29 +7,11 @@
   </nav>
 </template>
 
-<script>
+<script setup lang="ts">
 import BackLink from '@/components/BackLink.vue';
-import { moduleQuery } from '@/graphql/queries';
+import { getModule } from '@/graphql/queries';
 
-import me from '@/mixins/me';
+const { module } = getModule();
-
-export default {
-  apollo: {
-    module: moduleQuery,
-  },
-
-  mixins: [me],
-
-  components: {
-    BackLink,
-  },
-
-  data() {
-    return {
-      module: {},
-    };
-  },
-};
 </script>
 
 <style scoped lang="scss">

client/src/graphql/queries.js

@@ -1,5 +1,8 @@
 import MODULE_DETAILS_QUERY from './gql/queries/modules/moduleDetailsQuery.gql';
 import ME_QUERY from './gql/queries/meQuery.gql';
+import { useRoute } from 'vue-router';
+import { computed, watch } from 'vue';
+import { useQuery } from '@vue/apollo-composable';
 
 export function moduleQuery() {
   return {
@@ -10,8 +13,20 @@ export function moduleQuery() {
   };
 }
 
+const getModule = () => {
+  const route = useRoute();
+  const { result } = useQuery(MODULE_DETAILS_QUERY, {
+    slug: route.params.slug,
+  });
+  const module = computed(() => result.value?.module || {});
+
+  return { module };
+};
+
 export function meQuery() {
   return {
     query: ME_QUERY,
   };
 }
+
+export { getModule };