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

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

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

import relay from 'eslint-plugin-relay';

export default defineConfig(
  // 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 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']
};

Rule Descriptions

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.

Suppressing rules within graphql tags

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.

Contribute

We actively welcome pull requests, learn how to contribute.

License

eslint-plugin-relay is MIT licensed.