Usage with .vue files

import { mergeProcessors } from 'eslint-merge-processors'
import pluginVue from 'eslint-plugin-vue'
import processorVueBlocks from 'eslint-processor-vue-blocks'
import js from '@eslint/js'
import graphqlPlugin from '@graphql-eslint/eslint-plugin'

export default [
  {
    files: ['**/*.js'],
    processor: graphqlPlugin.processor,
    rules: js.configs.recommended.rules
  },
  ...pluginVue.configs['flat/recommended'],
  {
    files: ['**/*.vue'],
    // Vue still needs to be parsed by the Vue parser for normal linting. But GraphQL's lint needs to lint only the JS/TS part,
    // so extract those as blocks using eslint-processor-vue-blocks. This turns the script parts of Vue SFCs into virtual JS/TS
    // blocks inside ESLint. ESLint can then parse the JS/TS to find GraphQL parts. And finally, graphql-eslint can lint the resulting GraphQL
    processor: mergeProcessors([
      pluginVue.processors.vue,
      processorVueBlocks({
        blocks: {
          script: true,
          scriptSetup: true,
          customBlocks: true
        }
      })
    ])
  },
  {
    files: ['**/*.graphql'],
    languageOptions: {
      parser: graphqlPlugin.parser
    },
    plugins: {
      '@graphql-eslint': graphqlPlugin
    },
    rules: {
      '@graphql-eslint/no-anonymous-operations': 'error',
      '@graphql-eslint/no-duplicate-fields': 'error',
      '@graphql-eslint/naming-convention': [
        'error',
        {
          OperationDefinition: {
            style: 'PascalCase',
            forbiddenPrefixes: ['Query', 'Mutation', 'Subscription', 'Get'],
            forbiddenSuffixes: ['Query', 'Mutation', 'Subscription']
          }
        }
      ]
    }
  }
]

/**
 * Legacy config example, should be run with `ESLINT_USE_FLAT_CONFIG=false` environment variable in ESLint 9
 */

module.exports = {
  root: true,
  // ❗️ It's very important that you don't have any rules configured at the top-level config,
  // and to move all configurations into the overrides section. Since JavaScript rules
  // can't run on GraphQL files and vice versa, if you have rules configured at the top level,
  // they will try to also execute for all overrides, as ESLint's configs cascade
  overrides: [
    {
      files: ['*.js', '*.vue'],
      parser: 'vue-eslint-parser',
      processor: '@graphql-eslint/graphql',
      extends: ['eslint:recommended'],
      env: {
        es2022: true
      }
    },
    {
      files: ['*.graphql'],
      parser: '@graphql-eslint/eslint-plugin',
      plugins: ['@graphql-eslint'],
      rules: {
        '@graphql-eslint/no-anonymous-operations': 'error',
        '@graphql-eslint/no-duplicate-fields': 'error',
        '@graphql-eslint/naming-convention': [
          'error',
          {
            OperationDefinition: {
              style: 'PascalCase',
              forbiddenPrefixes: ['Query', 'Mutation', 'Subscription', 'Get'],
              forbiddenSuffixes: ['Query', 'Mutation', 'Subscription']
            }
          }
        ]
      }
    }
  ]
}