fix: always inline and deduplicate fragment definitions #8971

n1ru4l · 2023-02-08T13:51:50Z

The option dedupeFragments has been problematic from the beginning and caused a lot of unexpected behavior that lead to either duplicated fragment definitions within a document node or missing fragment definitions within a document node.

ATTENTION !!! This PR basically replaces the existing definitions spread (...) with a duplication/inline strategy. While this increases the bundle size of the client applications, it is actually the only possible way of solving this issue once and for all.

I marked this change as a fix, though it might be debatable that this should instead be a breaking change, which we could also ship IMHO.

-    ...VoteButtonsFragmentDoc.definitions,
-    ...RepoInfoFragmentDoc.definitions,
+   {
+     kind: 'FragmentDefinition',
+     name: { kind: 'Name', value: 'VoteButtons' },
+     typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Entry' } },
+     directives: [],
+     selectionSet: {
+       kind: 'SelectionSet',
+       selections: [
+         { kind: 'Field', name: { kind: 'Name', value: 'score' }, arguments: [], directives: [] },
+         {
+           kind: 'Field',
+           name: { kind: 'Name', value: 'vote' },
+           arguments: [],
+           directives: [],
+           selectionSet: {
+             kind: 'SelectionSet',
+             selections: [
+               { kind: 'Field', name: { kind: 'Name', value: 'vote_value' }, arguments: [], directives: [] },
+             ],
+           },
+         },
+       ],
+     },
+   },
+   {
+     kind: 'FragmentDefinition',
+     name: { kind: 'Name', value: 'RepoInfo' },
+     typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Entry' } },
+     directives: [],
+     selectionSet: {
+       kind: 'SelectionSet',
+       selections: [
+         { kind: 'Field', name: { kind: 'Name', value: 'createdAt' }, arguments: [], directives: [] },
+         {
+           kind: 'Field',
+           name: { kind: 'Name', value: 'repository' },
+           arguments: [],
+           directives: [],
+           selectionSet: {
+             kind: 'SelectionSet',
+             selections: [
+               { kind: 'Field', name: { kind: 'Name', value: 'description' }, arguments: [], directives: [] },
+               { kind: 'Field', name: { kind: 'Name', value: 'stargazers_count' }, arguments: [], directives: [] },
+               { kind: 'Field', name: { kind: 'Name', value: 'open_issues_count' }, arguments: [], directives: [] },
+             ],
+           },
+         },
+         {
+           kind: 'Field',
+           name: { kind: 'Name', value: 'postedBy' },
+           arguments: [],
+           directives: [],
+           selectionSet: {
+             kind: 'SelectionSet',
+             selections: [
+               { kind: 'Field', name: { kind: 'Name', value: 'html_url' }, arguments: [], directives: [] },
+               { kind: 'Field', name: { kind: 'Name', value: 'login' }, arguments: [], directives: [] },
+             ],
+           },
+         },
+       ],
+     },
+   },

Closes #8967
Closes #8842

changeset-bot · 2023-02-08T13:51:53Z

🦋 Changeset detected

Latest commit: 91479c5

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

This PR includes changesets to release 10 packages

Name	Type
@graphql-codegen/visitor-plugin-common	Patch
@graphql-codegen/client-preset	Patch
@graphql-codegen/typed-document-node	Patch
@graphql-codegen/typescript-document-nodes	Patch
@graphql-codegen/gql-tag-operations	Patch
@graphql-codegen/typescript-operations	Patch
@graphql-codegen/typescript-resolvers	Patch
@graphql-codegen/typescript	Patch
@graphql-codegen/graphql-modules-preset	Patch
babel-optimized	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

n1ru4l · 2023-02-08T13:52:28Z

packages/plugins/other/visitor-plugin-common/src/client-side-base-visitor.ts

      }

-      let meta: ExecutableDocumentNodeMeta | void;
+      const jsonStringify = (json: unknown) =>
+        JSON.stringify(json, (key, value) => (key === 'loc' ? undefined : value));


loc is only bloat

n1ru4l · 2023-02-08T13:53:05Z

packages/presets/client/tests/client-preset.spec.ts

@@ -1304,7 +1304,7 @@ export * from "./gql.js";`);

        export type CFragment = { __typename?: 'Query', c?: string | null } & { ' $fragmentName'?: 'CFragment' };

-        export const CFragmentDoc = {} as unknown as DocumentNode<CFragment, unknown>;
+        export const CFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"C"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Query"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"c"}}]}}]} as unknown as DocumentNode<CFragment, unknown>;


Now this can actually be used with readFragment and stuff 😬

github-actions · 2023-02-08T13:54:21Z

🚀 Snapshot Release (`alpha`)

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

Package	Version	Info
`@graphql-cli/codegen`	`3.0.1-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/cli`	`3.1.0-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/core`	`3.0.1-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/add`	`4.0.1-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/fragment-matcher`	`4.0.1-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/introspection`	`3.0.1-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/schema-ast`	`3.0.1-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/visitor-plugin-common`	`3.0.1-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/typescript-document-nodes`	`3.0.1-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/gql-tag-operations`	`2.0.1-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/typescript-operations`	`3.0.1-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/typescript-resolvers`	`3.0.1-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/typed-document-node`	`3.0.1-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/typescript`	`3.0.1-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/client-preset`	`2.1.0-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/gql-tag-operations-preset`	`2.1.0-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/graphql-modules-preset`	`3.0.1-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/testing`	`2.0.1-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎
`@graphql-codegen/plugin-helpers`	`4.1.0-alpha-20230215090240-91479c550`	npm ↗︎ unpkg ↗︎

github-actions · 2023-02-08T14:00:06Z

🚀 Website Preview

The latest changes to the website are available as preview in: https://2ff613ab.graphql-code-generator.pages.dev

saihaj

Let's mark dedupeFragments as a deprecated option so we can drop it in the next major.

.changeset/rotten-lizards-bathe.md

JanStevens · 2023-03-02T14:51:20Z

This is a breaking change IMO and should only be done in a major version.

Our generated file size just jumped from 600kb to a whopping 3.7MB causing issues on our frontend since there is a lot of fragment reuse going on (150 queries, lots and lots of fragments). Our Lighthouse score totally got trashed since we shipped a gigantic file, please reconsider 🙏 or keep the option in there like it was before.

We are using this in combination of typed-document-node, to be honest we never had issues with duplicate fragments (we are not using client-present atm).

Regards,

n1ru4l · 2023-03-13T15:52:40Z

@JanStevens Please use the SWC or babel plugin. Also, you can use persisted documents and completely drop the AST/string being shipped to the client. https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#persisted-documents

JanStevens · 2023-03-13T16:10:56Z

@JanStevens Please use the SWC or babel plugin. Also, you can use persisted documents and completely drop the AST/string being shipped to the client. https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#persisted-documents

I know about persisted documents but this is not implemented everywhere. For example when querying headless CMS like Contentful or DatoCMS, they don't offer a persisted query implementation. The only option is to add your own graphql server on top of their existing implementation, which is not really maintainable.

n1ru4l · 2023-03-13T17:03:40Z

You can also minify and transform your documents (e.g. inline fragments).

See

https://the-guild.dev/graphql/codegen/docs/advanced/document-transform

n1ru4l commented Feb 8, 2023

View reviewed changes

n1ru4l requested review from dotansimha, gilgardosh and saihaj February 8, 2023 13:53

n1ru4l mentioned this pull request Feb 8, 2023

Client preset generates duplicate fragments definitions #8842

Closed

dotansimha approved these changes Feb 13, 2023

View reviewed changes

saihaj approved these changes Feb 13, 2023

View reviewed changes

n1ru4l added 8 commits February 15, 2023 09:54

fix: always inline and deduplicate fragment definitions

09a7817

chore; add changesets

d032845

feat: remove dedupeFragments tests

9130ca0

chore: regenerate examples

e098c86

chore: apply optimizations in the right place

2b96edc

chore: update examples

e5c02d7

deprecate

6f8c218

chore: update fixtures

233ac86

n1ru4l force-pushed the fix-fragment-node-handling branch from 2b836fc to 233ac86 Compare February 15, 2023 08:56

n1ru4l commented Feb 15, 2023

View reviewed changes

.changeset/rotten-lizards-bathe.md Show resolved Hide resolved

Update .changeset/rotten-lizards-bathe.md

91479c5

n1ru4l merged commit 6b6fe3c into master Feb 16, 2023

n1ru4l deleted the fix-fragment-node-handling branch February 16, 2023 11:32

This was referenced Feb 16, 2023

Upcoming Release Changes #8909

Merged

Upcoming Release Changes danielo515/graphql-code-generator#243

Open

Upcoming Release Changes fossamagna/graphql-code-generator#1

Open

moalazzam mentioned this pull request Feb 22, 2023

Remove duplicate fragments from resolved request document graffle-js/graffle#460

Closed

n1ru4l mentioned this pull request Feb 26, 2023

Cannot read/write nested fragments dotansimha/graphql-code-generator-community#140

Closed

This was referenced Mar 7, 2023

Add a test case to ensure deduplicated fragments #9123

Merged

fragment not deduplicated by client preset #8670

Closed

adrienharnay mentioned this pull request Mar 8, 2023

Stop importing fragments that are now unused #9136

Closed

11 tasks

n1ru4l mentioned this pull request Mar 13, 2023

Add TypedDocumentNode string alternative #9137

Merged

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: always inline and deduplicate fragment definitions #8971

fix: always inline and deduplicate fragment definitions #8971

n1ru4l commented Feb 8, 2023 •

edited

Loading

changeset-bot bot commented Feb 8, 2023 •

edited

Loading

n1ru4l Feb 8, 2023

dotansimha Feb 13, 2023

n1ru4l Feb 8, 2023

dotansimha Feb 13, 2023

github-actions bot commented Feb 8, 2023 •

edited

Loading

github-actions bot commented Feb 8, 2023 •

edited

Loading

saihaj left a comment

JanStevens commented Mar 2, 2023

n1ru4l commented Mar 13, 2023

JanStevens commented Mar 13, 2023

n1ru4l commented Mar 13, 2023

fix: always inline and deduplicate fragment definitions #8971

fix: always inline and deduplicate fragment definitions #8971

Conversation

n1ru4l commented Feb 8, 2023 • edited Loading

changeset-bot bot commented Feb 8, 2023 • edited Loading

🦋 Changeset detected

n1ru4l Feb 8, 2023

Choose a reason for hiding this comment

dotansimha Feb 13, 2023

Choose a reason for hiding this comment

n1ru4l Feb 8, 2023

Choose a reason for hiding this comment

dotansimha Feb 13, 2023

Choose a reason for hiding this comment

github-actions bot commented Feb 8, 2023 • edited Loading

🚀 Snapshot Release (alpha)

github-actions bot commented Feb 8, 2023 • edited Loading

🚀 Website Preview

saihaj left a comment

Choose a reason for hiding this comment

JanStevens commented Mar 2, 2023

n1ru4l commented Mar 13, 2023

JanStevens commented Mar 13, 2023

n1ru4l commented Mar 13, 2023

n1ru4l commented Feb 8, 2023 •

edited

Loading

changeset-bot bot commented Feb 8, 2023 •

edited

Loading

github-actions bot commented Feb 8, 2023 •

edited

Loading

🚀 Snapshot Release (`alpha`)

github-actions bot commented Feb 8, 2023 •

edited

Loading