eslint-plugin-relay

2.0.0 verified Sat Apr 25 auth: no javascript

ESLint plugin for Relay, version 2.0.0, released under MIT license. It provides lint rules to catch common problems in Relay code, such as invalid GraphQL syntax, naming convention violations, missing colocated fragment spreads, and unused fields. The plugin ships with recommended and strict configurations, and supports suppression of certain rules within graphql tagged templates. Key differentiators: it provides faster feedback than the Relay Compiler for syntax and naming issues, and includes rules like `must-colocate-fragment-spreads` that enforce best practices for data fetching. It is actively maintained by the Relay team.

Common errors

error ESLint couldn't find the plugin "eslint-plugin-relay". ↓

cause The plugin is not installed or is missing from package.json devDependencies.

fix

Run npm i --save-dev eslint-plugin-relay and ensure it is listed in your package.json.

error Configuration for rule "relay/graphql-syntax" is invalid: Value "error" is not a valid severity. ↓

cause Rule severity must be 0, 1, 2 or 'off', 'warn', 'error'. Using a string like 'error' is fine, but sometimes typos occur.

fix

Use 'error' correctly: 'relay/graphql-syntax': 'error'.

Warnings

gotcha The `must-colocate-fragment-spreads` rule relies on globally unique module names and may not work well outside of Meta's environment. ↓

fix Consider disabling this rule if your project uses non-unique module names or relative imports.

deprecated The rule `relay/graphql-syntax` is deprecated? Actually it is still valid but may be superseded by compiler validation. ↓

fix No fix needed; rule still works, but you can rely on Relay Compiler for syntax validation.

gotcha Suppression within graphql tags only supports `eslint-disable-next-line`, not `eslint-disable-line`, due to graphql-js AST limitations. ↓

fix Use `eslint-disable-next-line` comment before the line you want to suppress, not inline.

Install

npm install eslint-plugin-relay

yarn add eslint-plugin-relay

pnpm add eslint-plugin-relay

Imports

plugin
wrong
```
plugins: ['eslint-plugin-relay']
```
correct
```
plugins: ['relay']
```
ESLint plugin names should omit the 'eslint-plugin-' prefix when listed in 'plugins'.
recommended config
wrong
```
extends: ['relay/recommended']
```
correct
```
extends: ['plugin:relay/recommended']
```
Use the full 'plugin:' prefix syntax when extending a plugin's config.
strict config
wrong
```
extends: ['relay/strict']
```
correct
```
extends: ['plugin:relay/strict']
```
Similar to recommended, use 'plugin:' prefix.

Quickstart

Installs and configures eslint-plugin-relay with all core rules enabled to catch common Relay code issues.

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

// .eslintrc.js
module.exports = {
  plugins: ['relay'],
  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',
  },
  // Alternatively, use recommended config:
  // extends: ['plugin:relay/recommended']
};