Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
4 tasks
jaydenseric opened this issue Aug 21, 2024 · 0 comments

Comments

@jaydenseric
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant