Combine with a project already using typescript linting

I’m using .ts files with gql template strings to create my schema. But after adding the configuration for the .eslintrc provided in the README I start getting conflicts in my linting process on any .ts file.

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: src/index.ts/0_/Users/aj/Developer/apollo-base/src/index.ts.
The file must be included in at least one of the projects provided.

On the files part of the schema, instead the error message is:

Parsing error: Unable to find any GraphQL type definitions for the following pointers:
        
          - src/server/schema/**/type-defs.ts
Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: src/server/schema/user/type-defs.ts/1_/Users/aj/Developer/apollo-base/src/server/schema/user/type-defs.ts.
The file must be included in at least one of the projects provided.eslint

How do I incorporate graphql-eslint in these cases in this type of project?

My complete .eslintrc file is:

---
root: true
env:
  es2020: true
  node: true
extends:
  - standard-with-typescript
  - plugin:@typescript-eslint/recommended-requiring-type-checking
  - prettier
  - prettier/standard
  - prettier/@typescript-eslint
  - plugin:prettier/recommended
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaVersion: 11
  sourceType: module
  project: ./tsconfig.json
plugins:
  - '@typescript-eslint'
rules: {}
overrides:
- files:
  - "*.tsx"
  - "*.ts"
  - "*.jsx"
  - "*.js"
  processor: "@graphql-eslint/graphql"
- files:
  - "*.graphql"
  parser: "@graphql-eslint/eslint-plugin"
  plugins:
  - "@graphql-eslint"
  rules:
    eol-last: 'off'
    prettier/prettier: 'off'

The tsconfig.json file:

{
  "extends": "@tsconfig/node14/tsconfig.json",
  "compilerOptions": {
    "incremental": true,
    "rootDir": "src",
    "outDir": "dist",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

[DianaSuvorova]

@dotansimha thanks for looking into that. We are using babel-eslint parser. So had to follow the same configuration pattern you suggested to parse both ‘.js’ and ‘.graphql’ files.

One more rule I had to turn off (that current graphql parser does not seem to play nice with in addition to prettier) is import/no-unresolved. So our config looks like:

const graphqlRules = {
  'prettier/prettier': 'off',
  'import/no-unresolved': 'off',
  '@graphql-eslint/naming-convention': ['warn', { ObjectTypeDefinition: 'PascalCase' }],
  '@graphql-eslint/no-anonymous-operations': ['error']
};


module.exports = {
  root: true,
  parser: 'babel-eslint'
  .... 
  overrides: [
    {
      files: ['*.js'],
      processor: '@graphql-eslint/graphql',
      plugins: ['@graphql-eslint'],
      rules:  graphqlRules
    },
    {
      files: ['*.graphql'],
      processor: '@graphql-eslint/graphql',
      parser: '@graphql-eslint/eslint-plugin',
      parserOptions: {
        'schema': 'schema.graphql'
      },
      plugins: ['@graphql-eslint'],
      rules: graphqlRules
    },
  ]

I think it works… though I provide you some more use cases…

Thanks, Diana

[ajotaos]

Sure thing, let me cook something minimal for this.