[#2291] Support the '...' group for alphabetizing fragment spreads

.changeset/weak-readers-build.md

@@ -0,0 +1,5 @@
+---
+'@graphql-eslint/eslint-plugin': minor
+---
+
+Support the fragment spread group when defining alphabetize rule's groups with new option `...`

.github/workflows/pr.yml.backup → .github/workflows/pr.yml

@@ -14,7 +14,7 @@ jobs:
     with:
       npmTag: alpha
       buildScript: prerelease
-      nodeVersion: 18
+      nodeVersion: 22
       packageManager: pnpm
     secrets:
       githubToken: ${{ secrets.GUILD_BOT_TOKEN }}

.github/workflows/release.yml

@@ -8,7 +8,7 @@ jobs:
     uses: the-guild-org/shared-config/.github/workflows/release-stable.yml@main
     with:
       releaseScript: release
-      nodeVersion: 18
+      nodeVersion: 22
       packageManager: pnpm
     secrets:
       githubToken: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -41,7 +41,7 @@ jobs:
       - name: Setup ENV
         uses: the-guild-org/shared-config/setup@main
         with:
-          nodeVersion: 18
+          nodeVersion: 22
           packageManager: pnpm
 
       - name: Build

.github/workflows/website.yml

@@ -21,7 +21,7 @@ jobs:
       - uses: the-guild-org/shared-config/setup@main
         name: setup env
         with:
-          nodeVersion: 18
+          nodeVersion: 22
           packageManager: pnpm
 
       - uses: the-guild-org/shared-config/website-cf@main

packages/plugin/src/configs/operations-all.ts

@@ -13,7 +13,7 @@ export = {
         selections: ['OperationDefinition', 'FragmentDefinition'],
         variables: true,
         arguments: ['Field', 'Directive'],
-        groups: ['id', '*', 'createdAt', 'updatedAt'],
+        groups: ['...', 'id', '*', 'createdAt', 'updatedAt'],
       },
     ],
     '@graphql-eslint/lone-executable-definition': 'error',

packages/plugin/src/rules/alphabetize/index.test.ts

@@ -444,5 +444,65 @@ ruleTester.run<RuleOptions>('alphabetize', rule, {
       `,
       errors: 3,
     },
+    {
+      name: 'should sort selections by group when `...` is at the start',
+      options: [
+        {
+          selections: ['OperationDefinition'],
+          groups: ['...', 'id', '*', 'createdAt', 'updatedAt'],
+        },
+      ],
+      code: /* GraphQL */ `
+        {
+          zz
+          updatedAt
+          createdAt
+          aa
+          id
+          ...ChildFragment
+        }
+      `,
+      errors: 4,
+    },
+    {
+      name: 'should sort selections by group when `...` is between',
+      options: [
+        {
+          selections: ['FragmentDefinition'],
+          groups: ['id', '*', '...', 'createdAt', 'updatedAt'],
+        },
+      ],
+      code: /* GraphQL */ `
+        fragment foo on Foo {
+          zz
+          ...ChildFragment
+          updatedAt
+          createdAt
+          aa
+          id
+        }
+      `,
+      errors: 3,
+    },
+    {
+      name: 'should sort selections by group when `...` is at the end',
+      options: [
+        {
+          selections: ['OperationDefinition'],
+          groups: ['id', '*', 'createdAt', 'updatedAt', '...'],
+        },
+      ],
+      code: /* GraphQL */ `
+        {
+          ...ChildFragment
+          zz
+          updatedAt
+          createdAt
+          aa
+          id
+        }
+      `,
+      errors: 4,
+    },
   ],
 });

packages/plugin/src/rules/alphabetize/index.ts

@@ -94,7 +94,7 @@ const schema = {
         ...ARRAY_DEFAULT_OPTIONS,
         minItems: 2,
         description:
-          "Custom order group. Example: `['id', '*', 'createdAt', 'updatedAt']` where `*` says for everything else.",
+          "Custom order group. Example: `['id', '*', 'createdAt', 'updatedAt', '...']` where `...` stands for fragment spreads, and `*` stands for  everything else.",
       },
     },
   },
@@ -203,7 +203,7 @@ export const rule: GraphQLESLintRule<RuleOptions> = {
             selections: selectionsEnum,
             variables: true,
             arguments: [Kind.FIELD, Kind.DIRECTIVE],
-            groups: ['id', '*', 'createdAt', 'updatedAt'],
+            groups: ['...', 'id', '*', 'createdAt', 'updatedAt'],
           },
         ],
       },
@@ -260,18 +260,14 @@ export const rule: GraphQLESLintRule<RuleOptions> = {
       // Starts from 1, ignore nodes.length <= 1
       for (let i = 1; i < nodes.length; i += 1) {
         const currNode = nodes[i];
-        const currName =
-          ('alias' in currNode && currNode.alias?.value) ||
-          ('name' in currNode && currNode.name?.value);
+        const currName = getName(currNode);
         if (!currName) {
           // we don't move unnamed current nodes
           continue;
         }
 
         const prevNode = nodes[i - 1];
-        const prevName =
-          ('alias' in prevNode && prevNode.alias?.value) ||
-          ('name' in prevNode && prevNode.name?.value);
+        const prevName = getName(prevNode);
         if (prevName) {
           // Compare with lexicographic order
           const compareResult = prevName.localeCompare(currName);
@@ -283,10 +279,9 @@ export const rule: GraphQLESLintRule<RuleOptions> = {
             if (!groups.includes('*')) {
               throw new Error('`groups` option should contain `*` string.');
             }
-            let indexForPrev = groups.indexOf(prevName);
-            if (indexForPrev === -1) indexForPrev = groups.indexOf('*');
-            let indexForCurr = groups.indexOf(currName);
-            if (indexForCurr === -1) indexForCurr = groups.indexOf('*');
+            const indexForPrev = getIndex({ node: prevNode, groups });
+            const indexForCurr = getIndex({ node: currNode, groups });
+
             shouldSortByGroup = indexForPrev - indexForCurr > 0;
             if (indexForPrev < indexForCurr) {
               continue;
@@ -412,3 +407,34 @@ export const rule: GraphQLESLintRule<RuleOptions> = {
     return listeners;
   },
 };
+
+function getIndex({
+  node,
+  groups,
+}: {
+  node: GraphQLESTreeNode<ASTNode>;
+  groups: string[];
+}): number {
+  // Try an exact match
+  let index = groups.indexOf(getName(node));
+
+  // Check for the fragment spread group
+  if (index === -1 && node.kind === Kind.FRAGMENT_SPREAD) {
+    index = groups.indexOf('...');
+  }
+
+  // Check for the catch-all group
+  if (index === -1) {
+    index = groups.indexOf('*');
+  }
+  return index;
+}
+
+function getName(node: GraphQLESTreeNode<ASTNode>): string {
+  return (
+    ('alias' in node && node.alias?.value) ||
+    //
+    ('name' in node && node.name?.value) ||
+    ''
+  );
+}