feat: add support for fragment arguments

.changeset/good-spiders-brush.md

@@ -0,0 +1,5 @@
+---
+'@0no-co/graphql.web': minor
+---
+
+Add support for variable definitions on fragments and arguments on fragment spreads (Fragment Arguments Spec Addition)

src/__tests__/__snapshots__/parser.test.ts.snap

@@ -185,6 +185,7 @@ exports[`parse > parses the kitchen sink document like graphql.js does 1`] = `
                                     "selectionSet": undefined,
                                   },
                                   {
+                                    "arguments": undefined,
                                     "directives": [
                                       {
                                         "arguments": undefined,
@@ -669,6 +670,7 @@ exports[`parse > parses the kitchen sink document like graphql.js does 1`] = `
           "value": "Friend",
         },
       },
+      "variableDefinitions": undefined,
     },
     {
       "directives": undefined,

src/__tests__/parser.test.ts

@@ -174,6 +174,105 @@ describe('parse', () => {
     expect(() => parse('fragment Name on Type { field }')).not.toThrow();
   });
 
+  it('parses fragment variable definitions', () => {
+    expect(parse('fragment x($var: Int = 1) on Type { field }').definitions[0]).toEqual({
+      kind: Kind.FRAGMENT_DEFINITION,
+      directives: undefined,
+      name: {
+        kind: Kind.NAME,
+        value: 'x',
+      },
+      typeCondition: {
+        kind: Kind.NAMED_TYPE,
+        name: {
+          kind: Kind.NAME,
+          value: 'Type',
+        },
+      },
+      variableDefinitions: [
+        {
+          kind: Kind.VARIABLE_DEFINITION,
+          type: {
+            kind: Kind.NAMED_TYPE,
+            name: {
+              kind: Kind.NAME,
+              value: 'Int',
+            },
+          },
+          variable: {
+            kind: Kind.VARIABLE,
+            name: {
+              kind: Kind.NAME,
+              value: 'var',
+            },
+          },
+          defaultValue: {
+            kind: Kind.INT,
+            value: '1',
+          },
+          directives: undefined,
+        },
+      ],
+      selectionSet: {
+        kind: Kind.SELECTION_SET,
+        selections: [
+          {
+            alias: undefined,
+            kind: Kind.FIELD,
+            directives: undefined,
+            selectionSet: undefined,
+            arguments: undefined,
+            name: {
+              kind: Kind.NAME,
+              value: 'field',
+            },
+          },
+        ],
+      },
+    });
+  });
+
+  it('parses fragment spread arguments', () => {
+    expect(parse('query x { ...x(varA: 2, varB: $var) }').definitions[0]).toHaveProperty(
+      'selectionSet.selections.0',
+      {
+        kind: Kind.FRAGMENT_SPREAD,
+        directives: undefined,
+        name: {
+          kind: Kind.NAME,
+          value: 'x',
+        },
+        arguments: [
+          {
+            kind: 'FragmentArgument',
+            name: {
+              kind: 'Name',
+              value: 'varA',
+            },
+            value: {
+              kind: 'IntValue',
+              value: '2',
+            },
+          },
+          {
+            kind: 'FragmentArgument',
+            name: {
+              kind: 'Name',
+              value: 'varB',
+            },
+            value: {
+              kind: 'Variable',
+              name: {
+                kind: 'Name',
+                value: 'var',
+              },
+            },
+          },
+        ],
+      }
+    );
+  });
+
   it('parses fields', () => {
     expect(() => parse('{ field: }')).toThrow();
     expect(() => parse('{ alias: field() }')).toThrow();

src/__tests__/printer.test.ts

@@ -117,6 +117,94 @@
     ).toBe('[Type!]');
   });
 
+  it('prints fragment-definition with variables', () => {
+    expect(
+      print({
+        kind: Kind.FRAGMENT_DEFINITION,
+        directives: [],
+        name: {
+          kind: Kind.NAME,
+          value: 'x',
+        },
+        typeCondition: {
+          kind: Kind.NAMED_TYPE,
+          name: {
+            kind: Kind.NAME,
+            value: 'Type',
+          },
+        },
+        variableDefinitions: [
+          {
+            kind: Kind.VARIABLE_DEFINITION,
+            type: {
+              kind: Kind.NAMED_TYPE,
+              name: {
+                kind: Kind.NAME,
+                value: 'Int',
+              },
+            },
+            variable: {
+              kind: Kind.VARIABLE,
+              name: {
+                kind: Kind.NAME,
+                value: 'var',
+              },
+            },
+            defaultValue: {
+              kind: Kind.INT,
+              value: '1',
+            },
+            directives: [],
+          },
+        ],
+        selectionSet: {
+          kind: Kind.SELECTION_SET,
+          selections: [
+            {
+              alias: undefined,
+              kind: Kind.FIELD,
+              directives: [],
+              selectionSet: undefined,
+              arguments: [],
+              name: {
+                kind: Kind.NAME,
+                value: 'field',
+              },
+            },
+          ],
+        },
+      } as any)
+    ).toBe(`fragment x($var: Int = 1) on Type {
+  field
+}`);
+  });
+
+  it('prints fragment-spread with arguments', () => {
+    expect(
+      print({
+        kind: Kind.FRAGMENT_SPREAD,
+        directives: [],
+        name: {
+          kind: Kind.NAME,
+          value: 'x',
+        },
+        arguments: [
+          {
+            kind: 'Argument',
+            name: {
+              kind: 'Name',
+              value: 'var',
+            },
+            value: {
+              kind: 'IntValue',
+              value: '2',
+            },
+          },
+        ],
+      } as any)
+    ).toBe(`...x(var: 2)`);
+  });
+
   // NOTE: The shim won't throw for invalid AST nodes
   it('returns empty strings for invalid AST', () => {
     const badAST = { random: 'Data' };
@@ -184,22 +272,22 @@
 
   it('Handles empty array selections', () => {
     const document: DocumentNode = {
       kind: Kind.DOCUMENT,
       definitions: [
         {
           kind: Kind.OPERATION_DEFINITION,
           operation: OperationTypeNode.QUERY,
           name: undefined,
           selectionSet: {
             kind: Kind.SELECTION_SET,
             selections: [
               {
                 kind: Kind.FIELD,
                 name: { kind: Kind.NAME, value: 'id' },
                 alias: undefined,
                 arguments: [],
                 directives: [],
                 selectionSet: { kind: Kind.SELECTION_SET, selections: [] },
               },
             ],
           },

src/ast.ts

@@ -38,6 +38,7 @@ export type ASTNode = Or<
   | FieldNode
   | ArgumentNode
   | FragmentSpreadNode
+  | FragmentArgumentNode
   | InlineFragmentNode
   | FragmentDefinitionNode
   | IntValueNode
@@ -185,6 +186,13 @@ export type ConstArgumentNode = Or<
   }
 >;
 
+export type FragmentArgumentNode = {
+  readonly kind: Kind.FRAGMENT_ARGUMENT;
+  readonly name: NameNode;
+  readonly value: ValueNode;
+  readonly loc?: Location;
+};
+
 export type FragmentSpreadNode = Or<
   GraphQL.FragmentSpreadNode,
   {
@@ -193,7 +201,9 @@ export type FragmentSpreadNode = Or<
     readonly directives?: ReadonlyArray<DirectiveNode>;
     readonly loc?: Location;
   }
->;
+> & {
+  readonly arguments?: ReadonlyArray<FragmentArgumentNode>;
+};
 
 export type InlineFragmentNode = Or<
   GraphQL.InlineFragmentNode,
@@ -212,6 +222,7 @@ export type FragmentDefinitionNode = Or<
     readonly kind: Kind.FRAGMENT_DEFINITION;
     readonly name: NameNode;
     readonly description?: StringValueNode;
+    readonly variableDefinitions?: ReadonlyArray<VariableDefinitionNode>;
     readonly typeCondition: NamedTypeNode;
     readonly directives?: ReadonlyArray<DirectiveNode>;
     readonly selectionSet: SelectionSetNode;

src/kind.d.ts

@@ -8,6 +8,7 @@ export declare enum Kind {
   SELECTION_SET = 'SelectionSet',
   FIELD = 'Field',
   ARGUMENT = 'Argument',
+  FRAGMENT_ARGUMENT = 'FragmentArgument',
   /** Fragments */
   FRAGMENT_SPREAD = 'FragmentSpread',
   INLINE_FRAGMENT = 'InlineFragment',

src/parser.ts

@@ -25,6 +25,7 @@
 }
 
 const leadingRe = / +(?=[^\s])/y;
+const nameRe = /[A-Za-z_][0-9A-Za-z_]*/y;
 function blockString(string: string) {
   const lines = string.split('\n');
   let out = '';
@@ -84,7 +85,7 @@
 
 function nameNode(): ast.NameNode {
   return {
     kind: 'Name' as Kind.NAME,
     value: name(),
   };
 }
@@ -106,7 +107,7 @@
       idx++;
       ignored();
       return {
         kind: 'ListValue' as Kind.LIST,
         values,
       };
 
@@ -119,7 +120,7 @@
         if (input.charCodeAt(idx++) !== 58 /*':'*/) throw error('ObjectField');
         ignored();
         fields.push({
           kind: 'ObjectField' as Kind.OBJECT_FIELD,
           name,
           value: value(constant),
         });
@@ -245,17 +246,22 @@
   };
 }
 
-function arguments_(constant: boolean): ast.ArgumentNode[] | undefined {
+function arguments_(
+  constant: boolean,
+  fragmentArgument?: boolean
+): ast.ArgumentNode[] | ast.FragmentArgumentNode[] | undefined {
   if (input.charCodeAt(idx) === 40 /*'('*/) {
-    const args: ast.ArgumentNode[] = [];
+    const args: ast.ArgumentNode[] | ast.FragmentArgumentNode[] = [];
     idx++;
     ignored();
     do {
       const name = nameNode();
       if (input.charCodeAt(idx++) !== 58 /*':'*/) throw error('Argument');
       ignored();
       args.push({
-        kind: 'Argument' as Kind.ARGUMENT,
+        kind: fragmentArgument
+          ? ('FragmentArgument' as Kind.FRAGMENT_ARGUMENT)
+          : ('Argument' as Kind.ARGUMENT),
         name,
         value: value(constant),
       });
@@ -357,6 +363,8 @@
             selections.push({
               kind: 'FragmentSpread' as Kind.FRAGMENT_SPREAD,
               name: nameNode(),
+              // @ts-expect-error
+              arguments: arguments_(false, true) as readonly ast.FragmentArgumentNode[],
               directives: directives(false),
             });
           }
@@ -377,6 +385,8 @@
           selections.push({
             kind: 'FragmentSpread' as Kind.FRAGMENT_SPREAD,
             name: nameNode(),
+            // @ts-expect-error
+            arguments: arguments_(false, true) as readonly ast.FragmentArgumentNode[],
             directives: directives(false),
           });
       }
@@ -460,19 +470,27 @@
 }
 
 function fragmentDefinition(description?: ast.StringValueNode): ast.FragmentDefinitionNode {
-  const name = nameNode();
-  if (input.charCodeAt(idx++) !== 111 /*'o'*/ || input.charCodeAt(idx++) !== 110 /*'n'*/)
-    throw error('FragmentDefinition');
+  let _name: string | undefined;
+  let _condition: string | undefined;
+  if ((_name = advance(nameRe)) == null) throw error('FragmentDefinition');
+  const _variableDefinitions = variableDefinitions();
+  if (advance(nameRe) !== 'on') throw error('FragmentDefinition');
+  ignored();
+  if ((_condition = advance(nameRe)) == null) throw error('FragmentDefinition');
+  ignored();
+  const _directives = directives(false);
+  if (input.charCodeAt(idx++) !== 123 /*'{'*/) throw error('FragmentDefinition');
   ignored();
   const fragDef: ast.FragmentDefinitionNode = {
     kind: 'FragmentDefinition' as Kind.FRAGMENT_DEFINITION,
-    name,
+    name: { kind: 'Name' as Kind.NAME, value: _name },
     typeCondition: {
       kind: 'NamedType' as Kind.NAMED_TYPE,
-      name: nameNode(),
+      name: { kind: 'Name' as Kind.NAME, value: _condition },
     },
-    directives: directives(false),
-    selectionSet: selectionSetStart(),
+    variableDefinitions: _variableDefinitions,
+    directives: _directives,
+    selectionSet: selectionSet(),
   };
   if (description) {
     fragDef.description = description;