chore: enable eslint for vue files (#1529)

Now that graphql-hive/graphql-eslint#480 is fixed.

.eslintrc.cjs

@@ -72,27 +72,12 @@ module.exports = {
         'spaced-comment': 'off',
       },
     },
-    {
-      // Extend graphql operations defined in code files to separate "virtual" files
-      files: ['*.ts'],
-      processor: '@graphql-eslint/graphql',
-    },
-    {
-      // Configure rules for "virtual" operation files
-      files: ['**/*.{ts,vue}/*.graphql'],
-      parser: '@graphql-eslint/eslint-plugin',
-      extends: 'plugin:@graphql-eslint/operations-recommended',
-      rules: {
-        // Enforces unique fragment name.
-        '@graphql-eslint/unique-fragment-name': 'error',
-        // Enforces unique operation names.
-        '@graphql-eslint/unique-operation-name': 'error',
-      },
-    },
     {
       files: ['*.ts', '*.vue'],
       // Parser supporting vue files
       parser: 'vue-eslint-parser',
+      // Extract graphql tags
+      processor: '@graphql-eslint/graphql',
       parserOptions: {
         // Use ts parser for ts files and for the script tag in vue files
         parser: '@typescript-eslint/parser',
@@ -107,6 +92,11 @@ module.exports = {
         // Enable recommended rules for typescript that use typing information (may be CPU intensive)
         'plugin:@typescript-eslint/recommended-requiring-type-checking',
       ],
+      rules: {
+        // The graphql processor disables the vue processor, so some rules need to be disenabled
+        // TODO: Remove this once https://github.com/eslint/eslint/issues/14745 is fixed and we can use multiple processors
+        'vue/comment-directive': 'off',
+      },
     },
     {
       files: ['layouts/**/*.vue', 'pages/**/*.vue'],
@@ -115,6 +105,18 @@ module.exports = {
         'vue/multi-word-component-names': 'off',
       },
     },
+    {
+      // Configure rules for "virtual" operation files
+      files: ['**/*.{ts,vue}/*.graphql'],
+      parser: '@graphql-eslint/eslint-plugin',
+      extends: 'plugin:@graphql-eslint/operations-recommended',
+      rules: {
+        // Enforces unique fragment name.
+        '@graphql-eslint/unique-fragment-name': 'error',
+        // Enforces unique operation names.
+        '@graphql-eslint/unique-operation-name': 'error',
+      },
+    },
     {
       // Special treatment for test files
       files: ['**/*.test.ts', '**/*.spec.ts'],

components/DocumentEditor.vue

@@ -134,6 +134,7 @@ const DocumentDetails = gql(/* GraphQL */ `
     }
     ... on JournalArticle {
       in {
+        id
         volume
         number
         journal {
@@ -147,6 +148,7 @@ const DocumentDetails = gql(/* GraphQL */ `
     }
     ... on ProceedingsArticle {
       in {
+        id
         title
       }
     }
@@ -168,7 +170,7 @@ const props = defineProps({
 
 const { result } = useQuery(
   gql(/* GraphQL */ `
-    query GetDocumentDetails($documentId: ID!) {
+    query DocumentDetails($documentId: ID!) {
       userDocument(id: $documentId) {
         ...DocumentDetails
       }

components/DocumentView.vue

@@ -127,6 +127,7 @@ const DocumentForView = gql(/* GraphQL */ `
     }
     ... on JournalArticle {
       in {
+        id
         journal {
           id
           name
@@ -135,6 +136,7 @@ const DocumentForView = gql(/* GraphQL */ `
     }
     ... on ProceedingsArticle {
       in {
+        id
         title
       }
     }

components/SideBar.vue

@@ -109,7 +109,7 @@ export default defineComponent({
   setup() {
     const { result } = useQuery(
       gql(/* GraphQL */ `
-        query GetGroups {
+        query Groups {
           me {
             id
             groups {

pages/dashboard.vue

@@ -38,12 +38,7 @@ const ui = useUiStore()
 
 const { result, fetchMore } = useQuery(
   gql(/* GraphQL */ `
-    query GetDocuments(
-      $groupId: ID
-      $query: String
-      $first: Int
-      $after: String
-    ) {
+    query Documents($groupId: ID, $query: String, $first: Int, $after: String) {
       me {
         id
         documents(