useGraphqlSortedVariables (GraphQL)

Language GraphQL

Summary

Rule available since: v2.6.0
Diagnostic Category: assist/source/useGraphqlSortedVariables
Sources:
- Inspired from @graphql-eslint/alphabetize

How to enable in your editor

1
{
2
  "editor.codeActionsOnSave": {
3
    "source.action.useGraphqlSortedVariables.biome": "explicit",
4
    "source.fixAll.biome": "explicit"
5
  }
6
}

1
{
2
  "code_actions_on_format": {
3
    "source.action.useGraphqlSortedVariables.biome": true,
4
    "source.fixAll.biome": true
5
  }
6
}

Use the source action code source.action.useGraphqlSortedVariables.biome

How to configure

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "useGraphqlSortedVariables": "on"
6
      }
7
    }
8
  }
9
}

Description

Sort the variable definitions of GraphQL operations in natural order.

Keeping the variables of query, mutation, and subscription operations sorted makes long variable lists easier to scan and review. The order of variable definitions doesn’t affect how an operation is executed.

Variables are sorted by name in a Natural order, meaning that uppercase letters come before lowercase letters (e.g. A < a < B < b) and numbers are compared to their numerical value (e.g. 9 < 10).

Examples

Invalid

1
query GetUser($userId: ID!, $includePosts: Boolean = false, $after: String) {
2
  user(id: $userId) {
3
    name
4
  }
5
}

code-block.graphql ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1   │ - query·GetUser($userId:·ID!,·$includePosts:·Boolean·=·false,·$after:·String)·{
      1 │ + query·GetUser($after:·String,·$includePosts:·Boolean·=·false,·$userId:·ID!)·{
    2 2 │     user(id: $userId) {
    3 3 │       name

Valid

1
query GetUser($after: String, $includePosts: Boolean = false, $userId: ID!) {
2
  user(id: $userId) {
3
    name
4
  }
5
}

Caveats

Comments above a variable and comments at the end of its line move with that variable. No fix is offered when a moved comment would end up on the same line as other code, because the comment would then hide that code or describe a different variable. Sort such variables manually, or put each variable on its own line.