Non existent query in .graphql file imported in JS goes through compilation without any error

[ajayjindal]

Hello all,
I am in need of help as we are facing discrepancy with graphql usage in reactJS, which slipped through without any compilation error and caused a runtime production issue.

scenario:

abc.graphql

query getItems(
  $uniqueId: ID!
) {
  ...
}

in my ReactJS app:
xyz.js

import {
  getFewItems,
} from './abc.graphql';

The Problem

The issue is getFewItems query does not exist in my graphql file and i am using it in my JS files, there is no error while compiling or in vscode editor, issue will occur only on runtime.

ideally we would want a behaviour of linting this missing-export in graphql file imports itself while developing and in ci compilation.
we are using the babel plugin correctly as mentioned in docs along with webpack( graphql-tag/loader ) one as well , but they doesn’t throw any error.

Would be grateful for any help on how we can achieve this behaviour.
Thanks, Ajay

[dimaMachina]

I guess there is a way to lint these cases with ESLint:

1. new rule should lint imports from code-files not (.graphql files)
2. new rule should parse the import path and look up actually loaded operations

If there will be more interest for community I can write it someday

[ajayjindal]

Hey @B2o5T , Thanks for the reply.
I was just looking at how to write this new custom rule for our case. Still researching a way.
If you could please elaborate the points (implementation wise) you mentioned above, it would help me write this ESlint rule for our codebase. (if i end up succeeding on my side, i can then help in raising a PR for graphql-eslint)

side note: i think community won't realise this gap exists until they encounter it in their production 🙈

[dimaMachina]

https://github.com/B2o5T/graphql-eslint/blob/master/docs/custom-rules.md

Also there is no best way of learning how to write rules than look up of source code of existing rules