eslint-plugin-relay-import-name

An ESLint plugin that keeps generated Relay operation request imports aligned with their GraphQL operation names.

// Bad: the request value no longer matches the operation/artifact name.
import exampleQuery from './__generated__/ExampleQuery.graphql';

// Good.
import ExampleQuery from './__generated__/ExampleQuery.graphql';

This makes operation names searchable and recognizable everywhere, including server preloaders and test fixtures that import generated requests directly.

Install

npm install -D eslint-plugin-relay-import-name
# or: pnpm add -D eslint-plugin-relay-import-name

Requires ESLint >= 9 and Node.js >= 22.

Usage

Use the flat-config preset:

import relayImportName from 'eslint-plugin-relay-import-name';

export default [relayImportName.configs.recommended];

Or configure the rule directly:

import relayImportName from 'eslint-plugin-relay-import-name';

export default [
  {
    plugins: {'relay-import-name': relayImportName},
    rules: {'relay-import-name/operation-import-name': 'error'},
  },
];

Rule: operation-import-name

For value imports from Relay's conventional __generated__/<OperationName>.graphql modules, the default request binding must exactly match an operation name ending in Query, Mutation, or Subscription.

When the generated request value and generated TypeScript type share a name, alias the type with a Type suffix:

import ExampleQuery, {
  type ExampleQuery as ExampleQueryType,
} from './__generated__/ExampleQuery.graphql';

The rule also checks import {default as ...} and rejects namespace operation imports, which would hide the request behind .default. Type-only imports and generated fragment imports are intentionally ignored.

License

MIT