How to lint gql string literals in TS files

[HHristovIV]

Hello Everyone,

I want to utilize eslint with the graphql-eslint plugin to lint all my .ts files for gql'{ query { bla } }' graphql queries. We really have to use string literals as we already have them in lots of places and creating separate graphql files is not an option currently.

From the docs, it seems like this should be possible, but I just cannot get it to work properly. I have tried all kinds of combinations, with this being the last eslint config I have attempted:

export default defineConfig(
  baseConfig,
  {
    files: ['**/*.ts'],
    processor: graphqlPlugin.processor,
    plugins: { '@graphql-eslint': graphqlPlugin },
    rules: {
      '@graphql-eslint/known-type-names': 'error',
      '@graphql-eslint/known-directives': 'error',
      '@graphql-eslint/executable-definitions': 'error',
      '@graphql-eslint/fields-on-correct-type': 'error',
      '@graphql-eslint/fragments-on-composite-type': 'error',
      '@graphql-eslint/no-undefined-variables': 'error',
      '@graphql-eslint/no-unused-variables': 'error',
    },
    languageOptions: {
      parser: tsParser,
      sourceType: 'module',
      parserOptions: {
        project: './tsconfig.json',
        graphqlTagName: 'gql',
      },
    },
  }
);

It seems like the I cannot get the .ts files to be processed properly so that the gql string literals are extracted and validated from them. I do have the graphql schema.json included inside the project as well.

I currently get the following error when running lint:
error Parsing error: The keyword 'import' is reserved

It definitely is a parsing error, but I feel a bit frustrated and out of ideas on how to configure this. If anyone has an example minimal working solution for linting gql string literals in .ts files, I would highly appreciate seeing it.

Thanks in advance!