From 2de9fdcf1227f92677ff1819c437cccc68db1669 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 28 Mar 2024 12:27:41 +0100
Subject: [PATCH] Fix readonly banner by making the me-query better cacheable

Resolves MS-850 #complete
---
 client/src/__generated__/gql.ts          |  4 +-
 client/src/components/ReadOnlyBanner.vue | 85 +++++++++++-------------
 client/src/graphql/cache.ts              |  1 +
 3 files changed, 40 insertions(+), 50 deletions(-)

diff --git a/client/src/__generated__/gql.ts b/client/src/__generated__/gql.ts
index d4a2f417..0dc90905 100644
--- a/client/src/__generated__/gql.ts
+++ b/client/src/__generated__/gql.ts
@@ -18,7 +18,7 @@ const documents = {
     "\n  fragment ContentBlockHighlightsFragment on ContentBlockNode {\n    id\n    __typename\n    highlights {\n      ...HighlightParts\n    }\n  }\n": types.ContentBlockHighlightsFragmentFragmentDoc,
     "\n    query LanguageQuery {\n      me {\n        language @client\n      }\n    }\n  ": types.LanguageQueryDocument,
     "\n    mutation SetLanguage($language: String!) {\n      setLanguage(language: $language) @client {\n        language\n      }\n    }\n  ": types.SetLanguageDocument,
-    "\n        query ReadOnlyQuery {\n          me {\n            readOnly\n            selectedClass {\n              readOnly\n            }\n          }\n        }\n      ": types.ReadOnlyQueryDocument,
+    "\n  query ReadOnlyQuery {\n    me {\n      readOnly\n      selectedClass {\n        readOnly\n      }\n    }\n  }\n": types.ReadOnlyQueryDocument,
     "\n  fragment SubmissionParts on StudentSubmissionNode {\n    id\n    text\n    final\n    document\n    submissionFeedback {\n      id\n      text\n      teacher {\n        firstName\n        lastName\n      }\n    }\n  }\n": types.SubmissionPartsFragmentDoc,
     "\n  fragment AssignmentParts on AssignmentNode {\n    id\n    title\n    assignment\n    solution\n    submission {\n      ...SubmissionParts\n    }\n  }\n": types.AssignmentPartsFragmentDoc,
     "\n    query AssignmentQuery($id: ID!) {\n      assignment(id: $id) {\n        ...AssignmentParts\n      }\n    }\n  ": types.AssignmentQueryDocument,
@@ -97,7 +97,7 @@ export function graphql(source: "\n    mutation SetLanguage($language: String!)
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n        query ReadOnlyQuery {\n          me {\n            readOnly\n            selectedClass {\n              readOnly\n            }\n          }\n        }\n      "): (typeof documents)["\n        query ReadOnlyQuery {\n          me {\n            readOnly\n            selectedClass {\n              readOnly\n            }\n          }\n        }\n      "];
+export function graphql(source: "\n  query ReadOnlyQuery {\n    me {\n      readOnly\n      selectedClass {\n        readOnly\n      }\n    }\n  }\n"): (typeof documents)["\n  query ReadOnlyQuery {\n    me {\n      readOnly\n      selectedClass {\n        readOnly\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/client/src/components/ReadOnlyBanner.vue b/client/src/components/ReadOnlyBanner.vue
index 6b2ca8d7..7cf97063 100644
--- a/client/src/components/ReadOnlyBanner.vue
+++ b/client/src/components/ReadOnlyBanner.vue
@@ -26,60 +26,49 @@
   </div>
 </template>
 
-<script>
-import gql from 'graphql-tag';
+<script setup lang="ts">
+import { graphql } from '@/__generated__';
 import { LICENSE_ACTIVATION } from '@/router/auth.names';
+import { useQuery } from '@vue/apollo-composable';
+import { computed } from 'vue';
 
-export default {
-  data() {
-    return {
-      me: {
+const query = graphql(`
+  query ReadOnlyQuery {
+    me {
+      readOnly
+      selectedClass {
+        readOnly
+      }
+    }
+  }
+`);
+
+const { result } = useQuery(query, null, {
+  fetchPolicy: 'cache-only',
+});
+
+const me = computed(() => {
+  const me = result.value?.me;
+  return (
+    me || {
+      readOnly: false,
+      selectedClass: {
         readOnly: false,
-        selectedClass: {
-          readOnly: false,
-        },
       },
-      licenseActivationLink: {
-        name: LICENSE_ACTIVATION,
-      },
-    };
-  },
+    }
+  );
+});
 
-  apollo: {
-    me: {
-      query: gql`
-        query ReadOnlyQuery {
-          me {
-            readOnly
-            selectedClass {
-              readOnly
-            }
-          }
-        }
-      `,
-      fetchPolicy: 'cache-only',
-      update({ me }) {
-        if (!me) {
-          return {
-            readOnly: false,
-            selectedClass: {
-              readOnly: false,
-            },
-          };
-        }
-        return me;
-      },
-    },
-  },
+const isReadOnly = computed(() => {
+  return me.value.readOnly || me.value.selectedClass?.readOnly;
+});
 
-  computed: {
-    readOnlyText() {
-      return this.me.readOnly ? 'Sie besitzen keine aktive Lizenz.' : 'Sie sind in dieser Klasse nicht mehr aktiv.';
-    },
-    isReadOnly() {
-      return this.me.readOnly || this.me.selectedClass?.readOnly;
-    },
-  },
+const readOnlyText = computed(() => {
+  return me.value.readOnly ? 'Sie besitzen keine aktive Lizenz.' : 'Sie sind in dieser Klasse nicht mehr aktiv.';
+});
+
+const licenseActivationLink = {
+  name: LICENSE_ACTIVATION,
 };
 </script>
 
diff --git a/client/src/graphql/cache.ts b/client/src/graphql/cache.ts
index 58220c53..2f59c90a 100644
--- a/client/src/graphql/cache.ts
+++ b/client/src/graphql/cache.ts
@@ -61,6 +61,7 @@ const typePolicies = {
     keyFields: ['slug'],
   },
   PrivateUserNode: {
+    keyFields: [], // i should never see anyone else's PrivateUserNode, so this should be a singleton
     fields: {
       language: {
         read() {