apollographql / eslint-plugin-graphql

:vertical_traffic_light: Check your GraphQL query strings against a schema.

Home Page:https://www.npmjs.com/package/eslint-plugin-graphql

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

No errors from an invalid mutation or query (Error @typescript-eslint/parser)

alexis-regnaud opened this issue · comments

Hi,
I am trying to use the eslint-plugin-graphql but it doesn't catch my graphql error.

Here's my eslintrc.js (I've reduced it to the relevant parts only) :

module.exports = {
  env: {
    "browser": true,
    "es6": true
  },
  parser: "@typescript-eslint/parser",
  parserOptions: {
    sourceType: "module",
    ecmaVersion: 2019,
    ecmaFeatures: {
      jsx: true
    },
    project: ["./tsconfig.json"]
  },
  plugins: [
    "react",
    "react-hooks",
    "@typescript-eslint",
    "graphql"
  ],
  extends: [
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  rules: [
    "graphql/template-strings": ['error', {
      env: 'apollo',
      schemaJson: require('./schema.json'),
    }]
  ]
};

In order to cause an eslint error I have defined an explicit issue in my file .gql (I've reduced it to the relevant parts only):

query GetUser() {
    users {
    id
    aFalseField
  }
}

But when I run my eslint pages/** I have no error related to graphql/template-strings.

So I have used eslint with debug mode : eslint pages/** --debug and I have this kind of errors :
Screen Shot 2020-05-19 at 5 16 33 PM
Eslint parse all .gql but it seems have a conflict between @typescript-eslint/parser and eslint-plugin-graphql
And if I add 'extraFileExtensions: ['.gql']' in my config I have no conflict but still no lint errors as well ..

Here my packages version :

    "@typescript-eslint/eslint-plugin": "^2.13.0",
    "@typescript-eslint/parser": "^2.34.0",
    "eslint": "^6.8.0",
    "eslint-plugin-graphql": "^3.1.1",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-hooks": "^2.3.0",
    "graphql": "^14.5.8",

Note :
The problem is only for separate files, when I use the graphql-tag eslint works well and detect aFalseField

const query = gql `
  users {
    id
    aFalseField
  }
`

To catch errors in separate files like .gql or .graphql I followed the hint from the readme
https://github.com/apollographql/eslint-plugin-graphql#graphql-literal-files

rules: [
    "graphql/template-strings": ['error', {
      env: 'literal',
      schemaJson: require('./schema.json'),
    }]
  ]

and the linter points out errors in my queries, maybe it will help you too 🤞

The both together :

rules: [
    "graphql/template-strings": ['error', {
      env: 'literal',
      schemaJson: require('./schema.json'),
    }]
  ]

and

extraFileExtensions: ['.gql']

work fine, I have the errors, thanks !