eslint-plugin-relay

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

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

eslint-plugin-relay comes with shared recommended and strict configs.

Example eslint.config.js (or eslint.config.ts):

importrelayfrom'eslint-plugin-relay';exportdefaultdefineConfig(// Other eslint properties here{files: ['**/*.{js,mjs,cjs,jsx,ts,tsx}'],plugins: {relay},
...relay.configs.recommended});

Example .eslintrc.js (for legacy versions of ESLint):

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

Instead of using a shared config, you can enable just the rules you want:

module.exports={// Other eslint properties hererules: {'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']};

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.

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:

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.

We actively welcome pull requests, learn how to contribute.

eslint-plugin-relay is MIT licensed.