eslint-plugin-relay  

eslint-plugin-relay is a plugin for ESLint to catch common problems in code using Relay early.

Install

npm i --save-dev eslint-plugin-relay

How To Use

1. Add "relay" to your eslint plugins section.
2. Add the relay rules such as "relay/graphql-syntax": "error" to your eslint rules section, see the example for all rules.

Example .eslintrc.js:

``js
module.exports = {
// Other eslint properties here
rules: {
'relay/graphql-syntax': 'error',
'relay/graphql-naming': 'error',
'relay/must-colocate-fragment-spreads': 'warn',
'relay/no-future-added-value': 'warn',
'relay/unused-fields': 'warn',
'relay/function-required-argument': 'warn',
'relay/hook-required-argument': 'warn'
},
plugins: ['relay']
};
`

You can also enable all the recommended or strict rules at once.
Add plugin:relay/recommended or plugin:relay/strict in extends:

`js
{
"extends": [
"plugin:relay/recommended"
]
}
`

$3

Brief descriptions for each rule:

- relay/graphql-syntax: Ensures each graphql\\ tagged template literal contains syntactically valid GraphQL. This is also validated by the Relay Compiler, but the ESLint plugin can often provide faster feedback.
- relay/graphql-naming: Ensures GraphQL fragments and queries follow Relay's naming conventions. This is also validated by the Relay Compiler, but the ESLint plugin can often provide faster feedback.
- relay/no-future-added-value: Ensures code does not try to explicitly handle the "%future added value" enum variant which Relay inserts as a placeholder to ensure you handle the possibility that new enum variants may be added by the server after your application has been deployed.
- relay/unused-fields: Ensures that every GraphQL field referenced is used within the module that includes it. This helps enable Relay's optimal data fetching
- relay/function-required-argument: Ensures that readInlineData is always passed an explicit argument even though that argument is allowed to be undefined at runtime.
- relay/hook-required-argument: Ensures that Relay hooks are always passed an explicit argument even though that argument is allowed to be undefined at runtime.
- relay/must-colocate-fragment-spreads: Ensures that when a fragment spread is added within a module, that module directly imports the module which defines that fragment. This prevents the anti-pattern when one component fetches a fragment that is not used by a direct child component. Note: This rule leans heavily on Meta's globally unique module names. It likely won't work well in other environments.

$3

The following rules support suppression within graphql tags:

- relay/unused-fields
- relay/must-colocate-fragment-spreads

Supported rules can be suppressed by adding # eslint-disable-next-line relay/name-of-rule to the preceding line:

`js
graphql
fragment foo on Page {
# eslint-disable-next-line relay/must-colocate-fragment-spreads
...unused1
}
;
`

Note that only the eslint-disable-next-line form of suppression works. eslint-disable-line doesn't currently work until graphql-js provides support for parsing Comment nodes in their AST.

Contribute

We actively welcome pull requests, learn how to contribute.

License

eslint-plugin-relay` is MIT licensed.