eslint-plugin-relay

What is eslint-plugin-relay?

eslint-plugin-relay is an ESLint plugin that provides linting rules for Relay, a JavaScript framework for building data-driven React applications. It helps ensure that your Relay code follows best practices and is free of common errors.

What are eslint-plugin-relay's main functionalities?

GraphQL Template Literal Linting

This feature ensures that GraphQL template literals are correctly formatted and syntactically valid. The rule checks for common mistakes in GraphQL queries embedded in JavaScript code.

/* eslint relay/graphql-syntax: 'error' */
const query = graphql`
  query UserQuery {
    user(id: "4") {
      name
    }
  }
`;

Compat Mode

This feature helps in transitioning to Relay Modern by ensuring that variables used in compat mode are correctly handled. It warns about potential issues when using older Relay Classic fragments with Relay Modern.

/* eslint relay/compat-uses-vars: 'warn' */
const fragment = graphql`
  fragment UserFragment on User {
    id
    name
  }
`;

No Unused Variables

This rule checks for unused variables in GraphQL queries, helping to keep the code clean and efficient by ensuring that all declared variables are used in the query.

/* eslint relay/no-unused-variables: 'error' */
const query = graphql`
  query UserQuery($id: ID!) {
    user(id: $id) {
      name
    }
  }
`;

Other packages similar to eslint-plugin-relay

eslint-plugin-graphql

eslint-plugin-graphql is a similar package that provides ESLint rules for GraphQL. It supports various GraphQL clients, including Relay, Apollo, and Lokka. While eslint-plugin-relay is specifically tailored for Relay, eslint-plugin-graphql offers broader support for different GraphQL clients, making it more versatile for projects that use multiple GraphQL libraries.

graphql-eslint

graphql-eslint is another package that offers a comprehensive set of ESLint rules for GraphQL. It provides more extensive linting capabilities for GraphQL schemas and operations, and it can be used with various GraphQL clients. Compared to eslint-plugin-relay, graphql-eslint offers a wider range of rules and is suitable for projects that require detailed GraphQL linting beyond just Relay.

README

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

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

Example .eslintrc.js:

module.exports = {
  // Other eslint properties here
  rules: {
    'relay/graphql-syntax': 'error',
    'relay/compat-uses-vars': 'warn',
    'relay/graphql-naming': 'error',
    'relay/generated-flow-types': 'warn',
    '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:

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

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.