Skip to content

Imported fragments cause false GraphQL validation rule errors in editor, but not via ESLint CLI #2511

Open
@jaydenseric

Description

@jaydenseric

Issue workflow progress

Progress of the issue based on the
Contributor Workflow

  • 1. The issue provides a reproduction available on GitHub, Stackblitz or CodeSandbox

    For example, you can start off by editng the
    'basic' example on Stackblitz.

    Please make sure the graphql-eslint version under package.json matches yours.

  • 2. A failing test has been provided

  • 3. A local solution has been provided

  • 4. A pull request is pending review


Describe the bug

With @graphql-eslint/eslint-plugin v4.0.0-alpha.4 and eslint v9.9.0, when TypeScript modules contain a template string GraphQL query with fragments embedded via interpolation, if the fragments are defined in the same TypeScript module it works fine, but if they are imported from another TypeScript module it causes in the GraphQL query ESLint GraphQL validation errors about unknown fragments and unused variables, BUT, only in the editor. The ESLint CLI works as expected.

To Reproduce Steps to reproduce the behavior:

Everything was working without lint errors using:

{
  "@typescript-eslint/eslint-plugin": "^8.2.0",
  "@typescript-eslint/parser": "^8.2.0"
}

And:

{
  "@graphql-eslint/eslint-plugin" : "^3.20.1",
  "eslint": "^8.57.0"
}

But now, using:

{
  "@graphql-eslint/eslint-plugin" : "^4.0.0-alpha.4",
  "eslint" : "^9.9.0"
}

The project lints like normal via the ESLint CLI, and if I deliberately make a mistake in a query so there is a wrongly named field, it is detected as a lint error. So the projects's schema is being used correctly by @graphql-eslint/eslint-plugin.

But, in the editor (VS Code or Zed, both of which implement vscode-eslint) opening the same TypeScript module containing the GraphQL query, the linter is able to tell if you use a wrong field name according to the project schema, but it is always reporting lint errors for GraphQL references to fragments (embedded in the template string query via interpolation) with a message like GraphQL: Validation: Unknown fragment "Foo"., and any variables defined in the query for use in those fragments are reported as lint errors like GraphQL: Validation: Variable "$foo" is never used in operation "Bar"..

Expected behavior

There should not be false GraphQL lint errors in the editor; it should lint correctly like via the ESLint CLI.

Environment:

  • OS: macOS v14.6.1
  • @graphql-eslint/eslint-plugin: v4.0.0-alpha.4
  • Node.js: v22.6.0

Additional context

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions