Add graphql codgen and refactor some code

Use unique names for all queries and fragments and mutations

client/codegen.ts

@@ -0,0 +1,17 @@
+import { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+  schema: ['../server/schema.graphql', './local.graphql'],
+  documents: ['src/**/*.vue'],
+  generates: {
+    'src/__generated__/': {
+      preset: 'client',
+      plugins: [],
+      presetConfig: {
+        useTypeImports: true
+      },
+    },
+  },
+  ignoreNoDocuments: true
+};
+export default config;

client/local.graphql

@@ -0,0 +1,3 @@
+type ModuleNode {
+  inEditMode: Boolean!
+}

client/package.json

@@ -30,7 +30,9 @@
     "cypress:parallel:run": "cy2 run --parallel --record  --config-file cypress.frontend.json --ci-build-id ",
     "currents": "cypress-cloud run --parallel --record --config-file cypress.frontend.ts",
     "prettier": "prettier . --write",
-    "prettier:check": "prettier . --check"
+    "prettier:check": "prettier . --check",
+    "codegen": "graphql-codegen",
+    "codegen-watch": "graphql-codegen -w"
   },
   "dependencies": {
     "@apollo/client": "^3.5.10",
@@ -41,6 +43,8 @@
     "@babel/preset-stage-2": "^7.0.0",
     "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime": "^7.5.4",
+    "@graphql-codegen/cli": "^5.0.0",
+    "@graphql-codegen/client-preset": "^4.1.0",
     "@graphql-tools/jest-transform": "^1.2.2",
     "@graphql-tools/mock": "^8.6.5",
     "@graphql-tools/schema": "^8.3.7",

client/src/__generated__/fragment-masking.ts

@@ -0,0 +1,66 @@
+import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { FragmentDefinitionNode } from 'graphql';
+import { Incremental } from './graphql';
+
+
+export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
+  infer TType,
+  any
+>
+  ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
+    ? TKey extends string
+      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+      : never
+    : never
+  : never;
+
+// return non-nullable if `fragmentType` is non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
+): TType;
+// return nullable if `fragmentType` is nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
+): TType | null | undefined;
+// return array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+): ReadonlyArray<TType>;
+// return array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): ReadonlyArray<TType> | null | undefined;
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): TType | ReadonlyArray<TType> | null | undefined {
+  return fragmentType as any;
+}
+
+
+export function makeFragmentData<
+  F extends DocumentTypeDecoration<any, any>,
+  FT extends ResultOf<F>
+>(data: FT, _fragment: F): FragmentType<F> {
+  return data as FragmentType<F>;
+}
+export function isFragmentReady<TQuery, TFrag>(
+  queryNode: DocumentTypeDecoration<TQuery, any>,
+  fragmentNode: TypedDocumentNode<TFrag>,
+  data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined
+): data is FragmentType<typeof fragmentNode> {
+  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__
+    ?.deferredFields;
+
+  if (!deferredFields) return true;
+
+  const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;
+  const fragName = fragDef?.name?.value;
+
+  const fields = (fragName && deferredFields[fragName]) || [];
+  return fields.length > 0 && fields.every(field => data && field in data);
+}

client/src/__generated__/gql.ts

@@ -0,0 +1,67 @@
+/* eslint-disable */
+import * as types from './graphql';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
+ */
+const documents = {
+    "\n        query ReadOnlyQuery {\n          me {\n            readOnly\n            selectedClass {\n              readOnly\n            }\n          }\n        }\n      ": types.ReadOnlyQueryDocument,
+    "\n                    fragment SnapshotFragment on SnapshotNode {\n                      title\n                    }\n                  ": types.SnapshotFragmentFragmentDoc,
+    "\n  query ModuleEditModeQuery($slug: String) {\n    module(slug: $slug) {\n      inEditMode @client\n      slug\n    }\n  }\n": types.ModuleEditModeQueryDocument,
+    "\n    query ChapterQuery($id: ID!) {\n      chapter(id: $id) {\n        path\n      }\n    }\n  ": types.ChapterQueryDocument,
+    "\n    query ContentBlockQuery($id: ID!) {\n      contentBlock(id: $id) {\n        path\n      }\n    }\n  ": types.ContentBlockQueryDocument,
+    "\n  query ModuleSolutions($slug: String) {\n    module(slug: $slug) {\n      solutionsEnabled\n      slug\n    }\n  }\n": types.ModuleSolutionsDocument,
+};
+
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+export function graphql(source: string): unknown;
+
+/**
+ * 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      "];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n                    fragment SnapshotFragment on SnapshotNode {\n                      title\n                    }\n                  "): (typeof documents)["\n                    fragment SnapshotFragment on SnapshotNode {\n                      title\n                    }\n                  "];
+/**
+ * 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 ModuleEditModeQuery($slug: String) {\n    module(slug: $slug) {\n      inEditMode @client\n      slug\n    }\n  }\n"): (typeof documents)["\n  query ModuleEditModeQuery($slug: String) {\n    module(slug: $slug) {\n      inEditMode @client\n      slug\n    }\n  }\n"];
+/**
+ * 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 ChapterQuery($id: ID!) {\n      chapter(id: $id) {\n        path\n      }\n    }\n  "): (typeof documents)["\n    query ChapterQuery($id: ID!) {\n      chapter(id: $id) {\n        path\n      }\n    }\n  "];
+/**
+ * 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 ContentBlockQuery($id: ID!) {\n      contentBlock(id: $id) {\n        path\n      }\n    }\n  "): (typeof documents)["\n    query ContentBlockQuery($id: ID!) {\n      contentBlock(id: $id) {\n        path\n      }\n    }\n  "];
+/**
+ * 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 ModuleSolutions($slug: String) {\n    module(slug: $slug) {\n      solutionsEnabled\n      slug\n    }\n  }\n"): (typeof documents)["\n  query ModuleSolutions($slug: String) {\n    module(slug: $slug) {\n      solutionsEnabled\n      slug\n    }\n  }\n"];
+
+export function graphql(source: string) {
+  return (documents as any)[source] ?? {};
+}
+
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;

client/src/__generated__/index.ts

@@ -0,0 +1,2 @@
+export * from "./fragment-masking";
+export * from "./gql";

client/src/components/ReadOnlyBanner.vue

@@ -48,7 +48,7 @@ export default {
   apollo: {
     me: {
       query: gql`
-        query {
+        query ReadOnlyQuery {
           me {
             readOnly
             selectedClass {

client/src/components/modules/SnapshotListItem.vue

@@ -57,6 +57,12 @@ import TrashIcon from '@/components/icons/TrashIcon.vue';
 import { removeAtIndex } from '@/graphql/immutable-operations';
 import { matomoTrackEvent } from '@/helpers/matomo-client';
 
+const SNAPSHOT_FRAGMENT = gql`
+                    fragment SnapshotFragment on SnapshotNode {
+                      title
+                    }
+                  `
+
 export default {
   props: {
     snapshot: {
@@ -113,11 +119,7 @@ export default {
                 const { id, title } = snapshot;
                 store.writeFragment({
                   id,
-                  fragment: gql`
+                  fragment: SNAPSHOT_FRAGMENT,
-                    fragment SnapshotFragment on SnapshotNode {
-                      title
-                    }
-                  `,
                   data: {
                     title,
                     __typename: 'SnapshotNode',
@@ -206,11 +208,7 @@ export default {
         ) {
           store.writeFragment({
             id,
-            fragment: gql`
+            fragment: SNAPSHOT_FRAGMENT,
-              fragment SnapshotFragment on SnapshotNode {
-                shared
-              }
-            `,
             data: {
               shared,
               __typename: 'SnapshotNode',

client/src/graphql/gql/mutations/updateFeedbackWithText.gql

@@ -1,4 +1,4 @@
-mutation UpdateSubmissionFeedback($input: UpdateSubmissionFeedbackInput!) {
+mutation UpdateSubmissionFeedbackWithText($input: UpdateSubmissionFeedbackInput!) {
   updateSubmissionFeedback(input: $input) {
     successful
     updatedSubmissionFeedback {

client/src/graphql/gql/queries/instrumentQueryById.gql

@@ -1,5 +1,5 @@
 #import "../fragments/instrumentParts.gql"
-query InstrumentQuery($id: ID!) {
+query InstrumentQueryById($id: ID!) {
   instrument(id: $id) {
     ...InstrumentParts
   }

client/src/graphql/gql/queries/roomEntryByIdQuery.gql

@@ -1,5 +1,5 @@
 #import "../fragments/roomEntryParts.gql"
-query RoomEntryQuery($id: ID!) {
+query RoomEntryByIdQuery($id: ID!) {
   roomEntry(id: $id) {
     ...RoomEntryParts
   }

client/src/graphql/queries.js

@@ -3,6 +3,7 @@ import ME_QUERY from './gql/queries/meQuery.gql';
 import { useRoute } from 'vue-router';
 import { computed } from 'vue';
 import { useQuery } from '@vue/apollo-composable';
+import { graphql } from '@/__generated__/gql';
 
 export function moduleQuery() {
   return {
@@ -15,9 +16,10 @@ export function moduleQuery() {
 
 const getModule = () => {
   const route = useRoute();
-  const { result } = useQuery(MODULE_DETAILS_QUERY, {
+  const query = graphql(MODULE_DETAILS_QUERY, {
-    slug: route.params.slug,
+    slug: route.params.slug
   });
+  const { result } = useQuery(query);
   const module = computed(() => result.value?.module || {});
 
   return { module };

client/src/pages/test.vue

@@ -1,72 +0,0 @@
-<template>
-  <div>
-    <button @click="makeQuery">Normal Query</button>
-    <pre>
-    {{ module }}
-    </pre>
-  </div>
-</template>
-
-<script>
-import gql from 'graphql-tag';
-// import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
-// import MODULE_PARTS from '@/graphql/gql/fragments/moduleParts.gql';
-
-const moduleParts = gql`
-  fragment ModuleParts on ModuleNode {
-    id
-    title
-  }
-`;
-
-const moduleQuery = gql`
-  ${moduleParts}
-  query ModuleQuery {
-    module(slug: "lohn-und-budget") {
-      ...ModuleParts
-    }
-  }
-`;
-
-const moduleAndObjectivesQuery = gql`
-  ${moduleParts}
-  query ModuleQuery {
-    module(slug: "lohn-und-budget") {
-      ...ModuleParts
-      objectiveGroups {
-        edges {
-          node {
-            id
-          }
-        }
-      }
-    }
-  }
-`;
-
-export default {
-  data() {
-    return {
-      objectiveGroups: {},
-      module: {},
-    };
-  },
-
-  methods: {
-    makeQuery() {
-      console.log('click');
-      this.$apollo.query({ query: moduleQuery });
-    },
-  },
-
-  apollo: {
-    // me: ME_QUERY
-    // objectiveGroups: gql,
-    module: moduleAndObjectivesQuery,
-  },
-};
-</script>
-
-<style scoped lang="scss">
-@import 'styles/helpers';
-</style>