apollographql / eslint-plugin-graphql

:vertical_traffic_light: Check your GraphQL query strings against a schema.
https://www.npmjs.com/package/eslint-plugin-graphql
1.21k stars 103 forks source link

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

Open alexis-regnaud opened 4 years ago

alexis-regnaud commented 4 years ago

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
  }
`
ertrzyiks commented 4 years ago

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 🤞

alexis-regnaud commented 4 years ago

The both together :

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

and

extraFileExtensions: ['.gql']

work fine, I have the errors, thanks !