Support "Flat Config" (ESLint 9)

[JoshuaKGoldberg]

👋 Coming over from eslint/eslint#18093: ESLint is migrating to a new "flat config" format that will be the default in ESLint v9.

It doesn't look like @graphql-eslint/eslint-plugin has support yet. I'm posting this issue here as a reference & cross-linking it to the table in eslint/eslint#18093. If there's anything technical blocking the extension from supporting flat configs, please let us know - we'd be happy to try to help! 💜

Additional resources:

• Configuration Migration Guide
• (edit) Plugin Migration Guide
• Blog posts on the new config system: Part 1: Background, Part 2: Introduction to flat config

[avaly]

While this plugin mentions it has support for Flat Config, it does work OK, until you run eslint --cache:

Oops! Something went wrong! :(

ESLint: 8.57.0

Error: Could not serialize processor object (missing 'meta' object).
    at Object.value (/home/user/eslint-bug/node_modules/eslint/lib/config/flat-config-array.js:243:27)
    at stringify (/home/user/eslint-bug/node_modules/json-stable-stringify-without-jsonify/index.js:25:25)
    at module.exports (/home/user/eslint-bug/node_modules/json-stable-stringify-without-jsonify/index.js:68:7)
    at hashOfConfigFor (/home/user/eslint-bug/node_modules/eslint/lib/cli-engine/lint-result-cache.js:50:75)
    at LintResultCache.getCachedLintResults (/home/user/eslint-bug/node_modules/eslint/lib/cli-engine/lint-result-cache.js:116:30)
    at /home/user/eslint-bug/node_modules/eslint/lib/eslint/flat-eslint.js:821:41
    at Array.map (<anonymous>)
    at FlatESLint.lintFiles (/home/user/eslint-bug/node_modules/eslint/lib/eslint/flat-eslint.js:793:23)
    at async Object.execute (/home/user/eslint-bug/node_modules/eslint/lib/cli.js:421:23)
    at async main (/home/user/eslint-bug/node_modules/eslint/bin/eslint.js:152:22)

[kamleshFC]

Is there any update on this? Even I am getting the same error as the above

[marceloverdijk]

I'm also trying to setup the GraphQL eslint but noticing some issues as well...

From the examples repo I e.g. tried:

import * as graphqlESLint from '@graphql-eslint/eslint-plugin';

  {
    files: ['**/*.graphql'],
    ...graphqlESLint.flatConfigs['schema-recommended'],
  },

but that gives:

> eslint .

Oops! Something went wrong! :(

ESLint: 8.57.0

TypeError: Key "rules": Key "@graphql-eslint/description-style": Could not find plugin "@graphql-eslint".

although "@graphql-eslint/eslint-plugin": "^3.20.1", is installed...

and when I try instead:

{
    files: ['**/*.graphql'],
    languageOptions: {
      parser: graphqlESLint,
    },
    plugins: {
      '@graphql-eslint': graphqlESLint,
    },
    // rules: {
    //   'prettier/prettier': 'error',
    // },
  },

but that gives:

> eslint .

Oops! Something went wrong! :(

ESLint: 8.57.0

Error: Error while loading rule '@typescript-eslint/await-thenable': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
Parser: undefined
Note: detected a parser other than @typescript-eslint/parser. Make sure the parser is configured to forward "parserOptions.project" to @typescript-eslint/parser.

Note my eslint.config.mjs contains more than only graphql lint options:

export default tseslint.config(
  {
    ignores: [
      'dist/',
      'public/',
      'src/**/*.generated.*',
    ],
  },
  eslint.configs.recommended,
  ...tseslint.configs.recommendedTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
  stylistic.configs.customize({
    arrowParens: true,
    semi: true,
  }),
  {
    plugins: {
      '@stylistic': stylistic,
    },
    rules: {
      '@stylistic/padding-line-between-statements': [
        'error',
        { blankLine: 'always', prev: 'import', next: '*' },
        { blankLine: 'any', prev: 'import', next: 'import' },
      ],
    },
    .. <the graphql lint config>
  },

[benasher44]

if you set parser as the following, it seems to work as a workaround:

      parser: {
        ...graphqlEslint,
        meta: {
          name: "@graphql-eslint",
        }
      }

[JavaScriptBach]

I also can't get this working, despite claimed flat config support. Any attempt by me to set parserOptions.documents fails with

error  Parsing error: [graphql-eslint] 
Unable to find any GraphQL type definitions for the following pointers:
- ./src/**/*.{ts}

I also couldn't find any examples or documentation on parserOptions.documents, for example it isn't in https://the-guild.dev/graphql/eslint/docs/getting-started/parser-options

[meierw]

For those interested here is an example of a config that ended up working for our project.

We are only using schema linting at the moment, so no idea how well this works for query linting.

// eslint.config.mjs

import { fixupPluginRules } from "@eslint/compat"

import * as graphqlEslint from "@graphql-eslint/eslint-plugin"

export default [
  // other configs here

  {
    files: ["**/*.gqls"],
    languageOptions: {
      ecmaVersion: 5,
      sourceType: "script",
      parser: { ...graphqlEslint, meta: { name: "@graphql-eslint" } },
      parserOptions: { schema: "./path/to/schema/**/*.gqls" },
    },
    plugins: { "@graphql-eslint": fixupPluginRules(graphqlEslint) },

    rules: {
      ...graphqlEslint.flatConfigs["schema-recommended"].rules,
      // other rule overrides here
    },
  },
]

[dimaMachina]

meta object was added for parser and processor in @graphql-eslint/eslint-plugin@4.0.0-alpha.2 https://github.com/dimaMachina/graphql-eslint/releases/tag/release-1722466173246

And ESLint's --cache flag now works

use examples https://github.com/dimaMachina/graphql-eslint/tree/master/examples as reference

v4 will be released once I polish documentation to include new changes

[bmulholland]

I couldn't find an example of using a set of rules from this plugin, so in case anyone is looking too: it goes in the rules part of the config. You'll need to configure the rest of the eslint config block as if you were doing a manual list of rules.

(HOWEVER, note that I wasn't able to get this working. When I add graphql-eslint, eslint seems to get stuck in an infinite loop or something. Or at least, it goes from taking <10s to over a couple minutes. --debug shows GraphQL template literals cannot be plucked from a Vue template code without having the "@vue/compiler-sfc" package installed. even though I have that in my package.json & installed. I'm out of time for digging into this today.)

Something like:

  {
    // Extract GraphQL from files for linting -- this creates .graphql files that are then linted
    // below
    // While we use the .gql extension for our files, under the hood the graphql-eslint plugin
    // scans all files (using the processor entry, below) and outputs a file with the
    // text that is then parsed and generates the errors we see. That file has a fixed .graphql
    // extension, so we need to include that extension below or .ts etc files won't be linted.
    // NOTE: Order matters! First, Vue processes, then GraphQL parses, THEN the linting can take
    // place.
    files: ["**/*.js", "**/*.ts", "**/*.vue"],
    processor: graphqlESLint.processors.graphql,
  },


  {
    // Setup GraphQL Parser
    files: ["**/*.graphql", "**/*.gql"],
    languageOptions: { parser: graphqlESLint.parser },
    // https://github.com/B2o5T/graphql-eslint/tree/master/packages/plugin/src/configs/operations-recommended.ts
    plugins: { "@graphql-eslint": { rules: graphqlESLint.rules } },
    rules: {
      ...graphqlESLint.configs["flat/operations-recommended"],
      // overrides here, such as
      "@graphql-eslint/naming-convention": ["off"],
    },
  },