Load me query for banner from cache only

client/src/App.vue

@@ -103,8 +103,6 @@
     min-height: 100vh;
     /*for IE10+*/
     display: flex;
-    flex-direction: column;
-
   }
 
   .no-scroll {

client/src/components/ReadOnlyBanner.vue

@@ -11,16 +11,52 @@
 </template>
 
 <script>
-  import me from '@/mixins/me';
+  import gql from 'graphql-tag';
 
   export default {
-    mixins: [me],
+    data() {
+      return {
+        me: {
+          readOnly: false,
+          selectedClass: {
+            readOnly: false,
+          },
+        },
+      };
+    },
+
+    apollo: {
+      me: {
+        query: gql`
+        query {
+          me {
+            readOnly
+            selectedClass {
+                readOnly
+            }
+          }
+        }
+`,
+        fetchPolicy: 'cache-only',
+        update({me}) {
+          if (!me) {
+            return {
+              readOnly: false,
+              selectedClass: {
+                readOnly: false,
+              }
+            };
+          }
+          return me;
+        }
+      },
+    },
 
     computed: {
       readOnlyText() {
         return this.me.readOnly ? 'Sie besitzen keine aktive Lizenz.' : 'Sie sind in dieser Klasse nicht mehr aktiv.';
-      }
-    }
+      },
+    },
   };
 </script>