Support "Flat Config" (ESLint 9)

[JoshuaKGoldberg]

👋 Coming over from https://github.com/eslint/eslint/issues/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 https://github.com/eslint/eslint/issues/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
    },
  },
]