[typescript-operations] Fix `@skip` and `@include` not applying conditional modifiers correctly when used on inline fragment by eddeee888 · Pull Request #10645 · dotansimha/graphql-code-generator

eddeee888 · 2026-03-16T12:31:47Z

Description

Previously, all inline fragment fields were merged with the base selection set, without considering if conditional directives (@skip or @inlcude) are applied on at the inline fragment, all fields of said fragment are optional as well

Now, conditional inline fragments are separated from the base and other inline fragments so correct conditional modifiers can be applied to the fields.

For example, if we have the following query:

query User {
  user {
    id # base selection set 
    ... on User { # non-conditional inline fragment
      name
    }
    ... on User @include(if: true) { # conditional inline fragment
      createdAt
    }
  }
}

Then, the generated Result type would look like this:

type UserQuery = { 
  user: { 
    name: string; // this comes from the non-conditional inline fragment and merged with the base type
    id: string // this comes from the base selection set
  } & {
    createdAt?: string // because this is part of a conditional spread, its fields are conditional as well
  }
}

Related: #10496
Issue: #9745

Type of change

Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Unit test

…ional when inline fragment is used

changeset-bot · 2026-03-16T12:31:53Z

🦋 Changeset detected

Latest commit: f1be5d6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@graphql-codegen/typescript-operations	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-03-16T12:34:14Z

🚀 Snapshot Release (`alpha`)

The latest changes of this PR are available as alpha on npm (based on the declared changesets):

Package	Version	Info
`@graphql-codegen/cli`	`7.0.0-alpha-20260316123536-f1be5d641cea639e270924f1ec243d48c90bda21`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/introspection`	`5.0.2-alpha-20260316123536-f1be5d641cea639e270924f1ec243d48c90bda21`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/visitor-plugin-common`	`7.0.0-alpha-20260316123536-f1be5d641cea639e270924f1ec243d48c90bda21`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/typescript-document-nodes`	`5.0.10-alpha-20260316123536-f1be5d641cea639e270924f1ec243d48c90bda21`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/gql-tag-operations`	`5.1.5-alpha-20260316123536-f1be5d641cea639e270924f1ec243d48c90bda21`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/typescript-operations`	`6.0.0-alpha-20260316123536-f1be5d641cea639e270924f1ec243d48c90bda21`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/typescript-resolvers`	`6.0.0-alpha-20260316123536-f1be5d641cea639e270924f1ec243d48c90bda21`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/typed-document-node`	`6.1.8-alpha-20260316123536-f1be5d641cea639e270924f1ec243d48c90bda21`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/typescript`	`6.0.0-alpha-20260316123536-f1be5d641cea639e270924f1ec243d48c90bda21`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/client-preset`	`6.0.0-alpha-20260316123536-f1be5d641cea639e270924f1ec243d48c90bda21`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/graphql-modules-preset`	`5.1.5-alpha-20260316123536-f1be5d641cea639e270924f1ec243d48c90bda21`	npm ↗︎ unpkg ↗︎

eddeee888 · 2026-03-16T12:53:49Z

-type CollectedFragmentNode = (SelectionNode | FragmentSpreadUsage | DirectiveNode) & FragmentDirectives;
+/**
+ * Each grouped TypeName has an array of nodes.
+ * These are collected when parsing the selection set,
+ * then turned into TypeScript strings
+ */
+type GroupedTypeNameNode =
+  | EnrichedFieldNode
+  | FragmentSpreadNode
+  | InlineFragmentNode
+  | FragmentSpreadUsage
+  | DirectiveNode;


GroupedTypeNameNode is a replacement for CollectedFragmentNode to be more semantically and type correct:

Semantic improvement: CollectedFragmentNode is not the correct name since we collect certain nodes, not just Fragments.

Type improvement: previously, DirectiveNode can never have fragmentDirectives field, so that was misleading that it has & FragmentDirectives. Now, only FieldNode (becomes EnrichedFieldNode) and FragmentSpreadNode may have fragmentDirectives field

eddeee888 · 2026-03-16T12:55:42Z

+  | EnrichedFieldNode
+  | FragmentSpreadNode
+  | InlineFragmentNode


The SelectionNode type is FieldNode | FragmentSpreadNode | InlineFragmentNode.

Since a FieldNode here could be enriched with fragmentDirectives (directives from the fragment the field is in), so I've just inlined and replaced FieldNode with EnrichedFieldNode

eddeee888 · 2026-03-16T12:57:01Z

-  protected _createInlineFragmentForFieldNodes(
-    parentType: GraphQLNamedType,
-    fieldNodes: FieldNode[]
-  ): InlineFragmentNode {
-    return {
-      kind: Kind.INLINE_FRAGMENT,
-      typeCondition: {
-        kind: Kind.NAMED_TYPE,
-        name: {
-          kind: Kind.NAME,
-          value: parentType.name,
-        },
-      },
-      directives: [],
-      selectionSet: {
-        kind: Kind.SELECTION_SET,
-        selections: fieldNodes,
-      },
-    };
-  }


This is just inlined below, since it's only used once

eddeee888 · 2026-03-16T12:58:28Z

+    return result;
  }

-  private _appendToTypeMap<T = CollectedFragmentNode>(


We never use the generic, may as well inline it.

eddeee888 · 2026-03-16T12:59:20Z

+        const collectGrouped = (nodes: GroupedTypeNameNode[]): void => {
+          // incrementalNodes are the ones flagged with @defer, meaning they become nullable
+          const { selectionNodes, incrementalNodes, fragmentSpreads } = nodes.reduce<{
+            selectionNodes: GroupedTypeNameNode[];
+            incrementalNodes: FragmentSpreadUsage[];
+            fragmentSpreads: string[];
+          }>(
+            (acc, node) => {
+              if ('fragmentDirectives' in node && hasIncrementalDeliveryDirectives(node.fragmentDirectives)) {
+                acc.incrementalNodes.push(node as FragmentSpreadUsage); // FIXME: check whether @defer would pick up EnrichedFieldNode here too?
+              } else {
+                acc.selectionNodes.push(node);
+              }
+              return acc;
+            },
+            { selectionNodes: [], incrementalNodes: [], fragmentSpreads: [] }
+          );

-        const { fields, dependentTypes: subDependentTypes } = this.buildSelectionSet(schemaType, selectionNodes, {
-          parentFieldName: this.buildParentFieldName(typeName, parentName),
-        });
-        const transformedSet = this.selectionSetStringFromFields(fields);
+          const { fields, dependentTypes: subDependentTypes } = this.buildSelectionSet(schemaType, selectionNodes, {
+            parentFieldName: this.buildParentFieldName(typeName, parentName),
+          });
+          const transformedSet = this.selectionSetStringFromFields(fields);

-        if (transformedSet) {
-          prev[typeName].push(transformedSet);
-        }
-        dependentTypes.push(...subDependentTypes);
-        if (!transformedSet && !fragmentSpreads.length) {
-          mustAddEmptyObject = true;
-        }
+          if (transformedSet) {
+            prev[typeName].push(transformedSet);
+          }
+          dependentTypes.push(...subDependentTypes);
+          if (!transformedSet && !fragmentSpreads.length) {
+            mustAddEmptyObject = true;
+          }

-        for (const incrementalNode of incrementalNodes) {
-          // 1. fragment masking
-          if (this._config.inlineFragmentTypes === 'mask' && 'fragmentName' in incrementalNode) {
-            const { fields: incrementalFields, dependentTypes: incrementalDependentTypes } = this.buildSelectionSet(
+          for (const incrementalNode of incrementalNodes) {
+            // 1. fragment masking
+            if (this._config.inlineFragmentTypes === 'mask' && 'fragmentName' in incrementalNode) {
+              const { fields: incrementalFields, dependentTypes: incrementalDependentTypes } = this.buildSelectionSet(
+                schemaType,
+                [incrementalNode],
+                { unsetTypes: true, parentFieldName: parentName }
+              );
+              const incrementalSet = this.selectionSetStringFromFields(incrementalFields);
+              prev[typeName].push(incrementalSet);
+              dependentTypes.push(...incrementalDependentTypes);
+
+              continue;
+            }
+
+            // 2. @defer
+            const { fields: initialFields, dependentTypes: initialDependentTypes } = this.buildSelectionSet(
+              schemaType,
+              [incrementalNode],
+              { parentFieldName: parentName }
+            );
+
+            const { fields: subsequentFields, dependentTypes: subsequentDependentTypes } = this.buildSelectionSet(
              schemaType,
              [incrementalNode],
              { unsetTypes: true, parentFieldName: parentName }
            );
-            const incrementalSet = this.selectionSetStringFromFields(incrementalFields);
-            prev[typeName].push(incrementalSet);
-            dependentTypes.push(...incrementalDependentTypes);

-            continue;
+            const initialSet = this.selectionSetStringFromFields(initialFields);
+            const subsequentSet = this.selectionSetStringFromFields(subsequentFields);
+            dependentTypes.push(...initialDependentTypes, ...subsequentDependentTypes);
+            prev[typeName].push({ union: [initialSet, subsequentSet] });
          }
+        };


Previously, this function only runs on the base selection set and inline fragments.
This is now extracted to run on conditional fragments as well.

eddeee888 · 2026-03-16T13:00:23Z

+    const primitiveFields = new Map<string, EnrichedFieldNode>();
+    const primitiveAliasFields = new Map<string, EnrichedFieldNode>();


Each FieldNode in this function may have fragmentDirectives in it. This makes it more type correct

eddeee888 · 2026-03-16T13:00:41Z

      // 1. Handle Field or Directtives selection nodes
      if ('kind' in selectionNode) {
-        if (selectionNode.kind === 'Field') {
+        if (selectionNode.kind === Kind.FIELD) {


Using Kind improves consistency here

eddeee888 · 2026-03-16T13:17:10Z

-export type FragmentDirectives = {
-  fragmentDirectives?: Array<DirectiveNode>;
-};


Moved to selection-set-to-object.ts as it's only used there

eddeee888 · 2026-03-16T13:18:13Z

+/**
+ * Check if any of the directives are conditional i.e. `@skip` and `@include`
+ */
+export function hasConditionalDirectives(directives: readonly DirectiveNode[] = []): boolean {
  const CONDITIONAL_DIRECTIVES = ['skip', 'include'];
-  return field.directives?.some(directive => CONDITIONAL_DIRECTIVES.includes(directive.name.value));
+  return directives.some(directive => CONDITIONAL_DIRECTIVES.includes(directive.name.value));


hasConditionalDirectives is updated to handle an array of directives, instead of just FieldNode for more flexibilities.

Directives may appear on a more nodes than just fields.

eddeee888 · 2026-03-16T13:19:01Z

Moved tests related to @skip and @include to ts-documents.skip-include-directives.spec.ts as-is

…tional modifiers correctly when used on inline fragment (#10645) * Migrate skip and include directive tests to a new file * Add test for aliased field * Add test for include directive, inline fragment cases * Refactor selection set to object to reflect current usages * Standardise type, parsing, fragment directive handling and fix conditional when inline fragment is used * Add inline fragment skip directive test * Add changeset

eddeee888 added 6 commits March 14, 2026 14:50

Migrate skip and include directive tests to a new file

d796e3a

Add test for aliased field

c4b3023

Add test for include directive, inline fragment cases

a6d0bfa

Refactor selection set to object to reflect current usages

43a24c8

Standardise type, parsing, fragment directive handling and fix condit…

9f86e8d

…ional when inline fragment is used

Add inline fragment skip directive test

e0366fc

eddeee888 changed the title ~~Master next fix skip include~~ [typescript-operations] Fix @skip and @include not applying conditional modifiers correctly to inline fragment fields Mar 16, 2026

eddeee888 changed the title ~~[typescript-operations] Fix @skip and @include not applying conditional modifiers correctly to inline fragment fields~~ [typescript-operations] Fix @skip and @include not applying conditional modifiers correctly when used on inline fragment Mar 16, 2026

Add changeset

f1be5d6

eddeee888 commented Mar 16, 2026

View reviewed changes

eddeee888 merged commit 81afcbe into master-next Mar 16, 2026
19 checks passed

eddeee888 deleted the master-next-fix-skip-include branch March 16, 2026 13:20

This was referenced Mar 17, 2026

[typescript-operations/client-preset] Next major version #10496

Draft

[typescript-operations] Fix @skip and @include not applying conditional modifiers correctly when used on fragment spread #10646

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[typescript-operations] Fix `@skip` and `@include` not applying conditional modifiers correctly when used on inline fragment#10645

[typescript-operations] Fix `@skip` and `@include` not applying conditional modifiers correctly when used on inline fragment#10645
eddeee888 merged 7 commits intomaster-nextfrom
master-next-fix-skip-include

eddeee888 commented Mar 16, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

eddeee888 Mar 16, 2026

Uh oh!

eddeee888 Mar 16, 2026

Uh oh!

eddeee888 Mar 16, 2026

Uh oh!

eddeee888 Mar 16, 2026

Uh oh!

eddeee888 Mar 16, 2026

Uh oh!

eddeee888 Mar 16, 2026

Uh oh!

eddeee888 Mar 16, 2026

Uh oh!

eddeee888 Mar 16, 2026

Uh oh!

eddeee888 Mar 16, 2026

Uh oh!

eddeee888 Mar 16, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		const primitiveFields = new Map<string, EnrichedFieldNode>();
		const primitiveAliasFields = new Map<string, EnrichedFieldNode>();

Conversation

eddeee888 commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

How Has This Been Tested?

Uh oh!

changeset-bot bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Snapshot Release (alpha)

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

eddeee888 commented Mar 16, 2026 •

edited

Loading

changeset-bot bot commented Mar 16, 2026 •

edited

Loading

github-actions bot commented Mar 16, 2026 •

edited

Loading

🚀 Snapshot Release (`alpha`)