@graphql-eslint/validate-against-schema alternative

[jgoux]

Hello! 😄
We were relying on @graphql-eslint/validate-against-schema to check our .graphql files against our schema. Now that it's removed, could you point out which exact rules were covered by @graphql-eslint/validate-against-schema? It was really useful for us as we saw it like a recommended rule set.

[ardatan]

You can use any other tools or IDE extensions to validate your documents against the schema.
https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql
https://graphql-inspector.com/docs/essentials/validate

[jgoux]

I am too, but eslint is tied to the project and works on CI which is the huge advantage.

[dotansimha]

Hi @jgoux !
Sure. The default list was based on the default of GraphQL-JS, it's exported as specifiedRules variable. You can find it here:
https://github.com/graphql/graphql-js/blob/main/src/validation/specifiedRules.ts#L102

[dotansimha]

Still not 100% sure about the recommended set. I was thinking about using specifiedRules but then noticed that most rules there act on a ready GraphQLSchema, while in graphql-eslint we wish to provide a more nice experience where you can lint specific files that are just part of the schema.
That was the reason for breaking it to multiple rules, and the reason to remove the pre-configured validate-against-schema.

We are still building the set of recommended rules, so if you have a recommendation based on your setup - feel free to share it!

[jgoux]

We didn't use any rules outside of @graphql-eslint/validate-against-schema and @graphql-eslint/no-anonymous-operations.

Do I have to port every rules in specifiedRules to their corresponding "@graphql-eslint/name-of-rule": "error" or is there any trick to map over the array and get the names? 😄

[dotansimha]

No need! :) Here you go:

      "@graphql-eslint/executable-definitions": "error",
      "@graphql-eslint/fields-on-correct-type": "error",
      "@graphql-eslint/fragments-on-composite-type": "error",
      "@graphql-eslint/known-argument-names": "error",
      "@graphql-eslint/known-directives": "error",
      "@graphql-eslint/known-fragment-names": "error",
      "@graphql-eslint/known-type-names": "error",
      "@graphql-eslint/lone-anonymous-operation": "error",
      "@graphql-eslint/lone-schema-definition": "error",
      "@graphql-eslint/no-fragment-cycles": "error",
      "@graphql-eslint/no-undefined-variables": "error",
      "@graphql-eslint/no-unused-fragments": "error",
      "@graphql-eslint/no-unused-variables": "error",
      "@graphql-eslint/overlapping-fields-can-be-merged": "error",
      "@graphql-eslint/possible-fragment-spread": "error",
      "@graphql-eslint/possible-type-extension": "error",
      "@graphql-eslint/provided-required-arguments": "error",
      "@graphql-eslint/scalar-leafs": "error",
      "@graphql-eslint/one-field-subscriptions": "error",
      "@graphql-eslint/unique-argument-names": "error",
      "@graphql-eslint/unique-directive-names": "error",
      "@graphql-eslint/unique-directive-names-per-location": "error",
      "@graphql-eslint/unique-enum-value-names": "error",
      "@graphql-eslint/unique-field-definition-names": "error",
      "@graphql-eslint/unique-input-field-names": "error",
      "@graphql-eslint/unique-operation-types": "error",
      "@graphql-eslint/unique-type-names": "error",
      "@graphql-eslint/unique-variable-names": "error",
      "@graphql-eslint/value-literals-of-correct-type": "error",
      "@graphql-eslint/variables-are-input-types": "error",
      "@graphql-eslint/variables-in-allowed-position": "error"

[dotansimha]

Also, I added it to the migration notes and changelog: https://github.com/dotansimha/graphql-eslint/blob/master/packages/plugin/CHANGELOG.md#breaking-change-remove-deprecated-rule-validate-against-schema :)

[jgoux]

This is perfect, thanks both of you for the help! 👏 🚀

[jgoux]

Last question, seems like the rule set is covering more than we previously defined or they were breaking changes for fragments detection, I now have errors on "Unknown fragment" and "Fragment is never used". I assume this is because we didn't use any # import clause in our .graphql files.
Do you know if there is a plugin that does # import path autocompletion in VS-Code ? 😅

EDIT :
It seems like the fragments should be picked up by eslint-graphql without # import as they are in the documents key of our config which according to graphql-config doc includes them by default (https://graphql-config.com/usage/#include--exclude)
Our config (dynamically generated from multiple .js files) : https://gist.github.com/jgoux/2c8a0cfe9d60de22ffbc90333000492c

EDIT 2 :
In fact we don't rely on our graphql.config.json for the eslint plugin! Here is our parserOptions configuration :

parserOptions: {
    operations: "./src/**/*.graphql",
    schema: "../../schema.graphql",
    skipGraphQLConfig: true,
  },

I'm sure the operations are loaded because if I point to another path, I have an error telling me that there is no operations for the given path. So my operations are all loaded but the fragments aren't detected. 🤔

[jgoux]

Thanks for the pointer!
I added this statement :

And all the siblings seem there : https://gist.github.com/jgoux/73b79e57b96531f89ab6c99b089c2512 🤔

The first eslint error refers to this fragment.

[dotansimha]

Oh, I think it might happen because when you run ESLint from the IDE, it changes the cwd (it uses the file directory as base dir, instead of the project root), leading to a change in the files loaded.

A common practice with Linter/Prettier config is to use __dirname as the base path for the eslint config. Something like that:

parserOptions: {
    operations: __dirname + "/src/**/*.graphql",
    schema: __dirname + "/../../schema.graphql",
    skipGraphQLConfig: true,
  },

[jgoux]

Our eslint-graphql configuration is in it own package, it doesn't directly live in our client package (where it's used) but according to the logs in my gist the paths to the graphql files are correct no? So it doesn't seem related to these paths to me. For the log output I pasted I executed eslint using the CLI not the IDE.

[dotansimha]

I was just guessing because if it seems like the operations are loaded when you run eslint directory as cli, but failed to locate any operation when you run it through the IDE (based on the screenshot you shared). I had a similar issue with another project before. Can you please just confirm if it works fine with the CLI, but fails on the IDE? I wasn't sure about it :D

[jgoux]

My log output is from the CLI, not the IDE. It doesn't work in either cases (that might be the good news? lol). Look at the end of the logs, there are the ESLint errors, the same as the IDE.

I'm not familiar with the codebase, but if I try logging the getFragments function it's never called. Or maybe ESLint / yarn is caching the dependency when I execute the CLI? https://github.com/dotansimha/graphql-eslint/blob/master/packages/plugin/src/sibling-operations.ts#L129-L148