Usage with code files `.js`/`.jsx`

You need to add a new configuration object in your eslint.config.js to setup GraphQL-ESLint processor for .js files.

eslint.config.js


import graphqlPlugin from '@graphql-eslint/eslint-plugin';
 
export default [
+ {
+   files: ['**/*.js'],
+   processor: graphqlPlugin.processor
+ },
  {
    files: ['**/*.graphql'],
    languageOptions: {
      parser: graphqlPlugin.parser
    },
    plugins: {
      '@graphql-eslint': graphqlPlugin
    },
    rules: {
      '@graphql-eslint/known-type-names': 'error'
    }
  }
]

💡

Tip

Under the hood, the processor extracts schema and operation files from files: ['**/*.js'] and treats them as virtual GraphQL documents with .graphql extensions. This enables the overrides you define for .graphql files, under files: ['**/*.graphql'], to be applied to the definitions within your code files.

Note

Check out the official examples for ESLint Flat Config or ESLint Legacy Config .

GraphQL Config

graphql.config.js


export default {
  schema: 'schema.graphql',
};

ESLint Flat Config

eslint.config.js


import js from '@eslint/js';
import graphqlPlugin from '@graphql-eslint/eslint-plugin';
 
export default [
  {
    files: ['**/*.js'],
    processor: graphqlPlugin.processor,
    rules: {
      ...js.configs.recommended.rules,
      'no-console': 'error',
    },
  },
  {
    files: ['**/*.graphql'],
    languageOptions: {
      parser: graphqlPlugin.parser,
    },
    plugins: {
      '@graphql-eslint': graphqlPlugin,
    },
    rules: {
      '@graphql-eslint/no-anonymous-operations': 'error',
      '@graphql-eslint/naming-convention': [
        'error',
        {
          OperationDefinition: {
            style: 'PascalCase',
            forbiddenPrefixes: ['Query', 'Mutation', 'Subscription', 'Get'],
            forbiddenSuffixes: ['Query', 'Mutation', 'Subscription'],
          },
        },
      ],
    },
  },
];

ESLint Legacy Config

⚠️

Warning

An eslintrc configuration file, is deprecated and support will be removed in ESLint v10.0.0. Migrate to an eslint.config.js file

.eslintrc.cjs


/**
 * 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'],
      processor: '@graphql-eslint/graphql',
      extends: ['eslint:recommended'],
      env: {
        es2022: true,
      },
      parserOptions: {
        sourceType: 'module',
      },
      rules: {
        'no-console': 'error',
      },
    },
    {
      files: ['*.graphql'],
      parser: '@graphql-eslint/eslint-plugin',
      plugins: ['@graphql-eslint'],
      rules: {
        '@graphql-eslint/no-anonymous-operations': 'error',
        '@graphql-eslint/naming-convention': [
          'error',
          {
            OperationDefinition: {
              style: 'PascalCase',
              forbiddenPrefixes: ['Query', 'Mutation', 'Subscription', 'Get'],
              forbiddenSuffixes: ['Query', 'Mutation', 'Subscription'],
            },
          },
        ],
      },
    },
  ],
};

Usage with code files .js/.jsx

GraphQL Config

ESLint Flat Config

ESLint Legacy Config

Usage with code files `.js`/`.jsx`