fix: link for bundle size reduction docs (#10075)

n1ru4l · web-flow · commit 67e75561a3e8 · 2024-07-30T07:48:07.000+02:00
diff --git a/.changeset/pretty-berries-matter.md b/.changeset/pretty-berries-matter.md
@@ -0,0 +1,6 @@
+---
+'@graphql-codegen/gql-tag-operations': patch
+'@graphql-codegen/client-preset': patch
+---
+
+Add note about enabling bundle size reduction for the generated `graphql` tag file.
diff --git a/dev-test/gql-tag-operations-masking/gql/gql.ts b/dev-test/gql-tag-operations-masking/gql/gql.ts
@@ -11,6 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n  fragment TweetFragment on Tweet {\n    id\n    body\n    ...TweetAuthorFragment\n  }\n':
diff --git a/dev-test/gql-tag-operations-urql/gql/gql.ts b/dev-test/gql-tag-operations-urql/gql/gql.ts
@@ -11,6 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n  query Foo {\n    Tweets {\n      id\n    }\n  }\n': types.FooDocument,
diff --git a/dev-test/gql-tag-operations/gql/gql.ts b/dev-test/gql-tag-operations/gql/gql.ts
@@ -11,6 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n  query Foo {\n    Tweets {\n      id\n    }\n  }\n': types.FooDocument,
diff --git a/dev-test/gql-tag-operations/graphql/gql.ts b/dev-test/gql-tag-operations/graphql/gql.ts
@@ -11,6 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n  query Foo {\n    Tweets {\n      id\n    }\n  }\n': types.FooDocument,
diff --git a/examples/persisted-documents-string-mode/src/gql/gql.ts b/examples/persisted-documents-string-mode/src/gql/gql.ts
@@ -10,6 +10,7 @@ import * as types from './graphql';
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n  query HelloQuery {\n    hello\n  }\n': types.HelloQueryDocument,
diff --git a/examples/persisted-documents/src/gql/gql.ts b/examples/persisted-documents/src/gql/gql.ts
@@ -11,6 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n  query HelloQuery {\n    hello\n  }\n': types.HelloQueryDocument,
diff --git a/examples/react/apollo-client-defer/src/gql/gql.ts b/examples/react/apollo-client-defer/src/gql/gql.ts
@@ -11,6 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n  fragment SlowFieldFragment on Query {\n    slowField(waitFor: 5000)\n  }\n': types.SlowFieldFragmentFragmentDoc,
diff --git a/examples/react/apollo-client-swc-plugin/src/gql/gql.ts b/examples/react/apollo-client-swc-plugin/src/gql/gql.ts
@@ -11,6 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n  query allFilmsWithVariablesQuery($first: Int!) {\n    allFilms(first: $first) {\n      edges {\n        node {\n          ...FilmItem\n        }\n      }\n    }\n  }\n':
diff --git a/examples/react/apollo-client/src/gql/gql.ts b/examples/react/apollo-client/src/gql/gql.ts
@@ -11,6 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n  query allFilmsWithVariablesQuery($first: Int!) {\n    allFilms(first: $first) {\n      edges {\n        node {\n          ...FilmItem\n        }\n      }\n    }\n  }\n':
diff --git a/examples/react/http-executor/src/gql/gql.ts b/examples/react/http-executor/src/gql/gql.ts
@@ -11,6 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n  query allFilmsWithVariablesQuery($first: Int!) {\n    allFilms(first: $first) {\n      edges {\n        node {\n          ...FilmItem\n        }\n      }\n    }\n  }\n':
diff --git a/examples/react/nextjs-swr/gql/gql.ts b/examples/react/nextjs-swr/gql/gql.ts
@@ -11,6 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n  fragment FilmItem on Film {\n    id\n    title\n    releaseDate\n    producers\n  }\n':
diff --git a/examples/react/tanstack-react-query/src/gql/gql.ts b/examples/react/tanstack-react-query/src/gql/gql.ts
@@ -10,6 +10,7 @@ import * as types from './graphql';
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n  query allFilmsWithVariablesQuery($first: Int!) {\n    allFilms(first: $first) {\n      edges {\n        node {\n          ...FilmItem\n        }\n      }\n    }\n  }\n':
diff --git a/examples/react/urql/src/gql/gql.ts b/examples/react/urql/src/gql/gql.ts
@@ -10,6 +10,7 @@ import * as types from './graphql';
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n  query allFilmsWithVariablesQuery199($first: Int!) {\n    allFilms(first: $first) {\n      edges {\n        node {\n          ...FilmItem\n        }\n      }\n    }\n  }\n':
diff --git a/examples/typescript-esm/src/gql/gql.ts b/examples/typescript-esm/src/gql/gql.ts
@@ -11,6 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n  query AllPeopleQuery {\n    allPeople(first: 5) {\n      edges {\n        node {\n          name\n          homeworld {\n            name\n          }\n        }\n      }\n    }\n  }\n':
diff --git a/examples/typescript-graphql-request/src/gql/gql.ts b/examples/typescript-graphql-request/src/gql/gql.ts
@@ -10,6 +10,7 @@ import * as types from './graphql';
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n  query AllPeopleQuery {\n    allPeople(first: 5) {\n      edges {\n        node {\n          name\n          homeworld {\n            name\n          }\n        }\n      }\n    }\n  }\n':
diff --git a/examples/vite/vite-react-cts/src/gql/gql.ts b/examples/vite/vite-react-cts/src/gql/gql.ts
@@ -11,6 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n  fragment FilmItem on Film {\n    id\n    title\n    releaseDate\n    producers\n  }\n':
diff --git a/examples/vite/vite-react-mts/src/gql/gql.ts b/examples/vite/vite-react-mts/src/gql/gql.ts
@@ -11,6 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n  fragment FilmItem on Film {\n    id\n    title\n    releaseDate\n    producers\n  }\n':
diff --git a/examples/vite/vite-react-ts/src/gql/gql.ts b/examples/vite/vite-react-ts/src/gql/gql.ts
@@ -11,6 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n  fragment FilmItem on Film {\n    id\n    title\n    releaseDate\n    producers\n  }\n':
diff --git a/examples/vue/apollo-composable/src/gql/gql.ts b/examples/vue/apollo-composable/src/gql/gql.ts
@@ -11,6 +11,7 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n    query allFilmsWithVariablesQuery($first: Int!) {\n      allFilms(first: $first) {\n        edges {\n          node {\n            ...FilmItem\n          }\n        }\n      }\n    }\n  ':
diff --git a/examples/vue/urql/src/gql/gql.ts b/examples/vue/urql/src/gql/gql.ts
@@ -11,6 +11,7 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n    query allFilmsWithVariablesQuery($first: Int!) {\n      allFilms(first: $first) {\n        edges {\n          node {\n            ...FilmItem\n          }\n        }\n      }\n    }\n  ':
diff --git a/examples/vue/villus/src/gql/gql.ts b/examples/vue/villus/src/gql/gql.ts
@@ -11,6 +11,7 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n    query allFilmsWithVariablesQuery($first: Int!) {\n      allFilms(first: $first) {\n        edges {\n          node {\n            ...FilmItem\n          }\n        }\n      }\n    }\n  ':
diff --git a/examples/yoga-tests/src/gql/gql.ts b/examples/yoga-tests/src/gql/gql.ts
@@ -11,6 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
   '\n      query HelloQuery {\n        hello\n      }\n    ': types.HelloQueryDocument,
diff --git a/packages/plugins/typescript/gql-tag-operations/src/index.ts b/packages/plugins/typescript/gql-tag-operations/src/index.ts
@@ -146,7 +146,10 @@ function getDocumentRegistryChunk(sourcesWithOperations: Array<SourceWithOperati
   lines.add(` * 1. It is not tree-shakeable, so it will include all operations in the project.\n`);
   lines.add(` * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.\n`);
   lines.add(` * 3. It does not support dead code elimination, so it will add unused operations.\n *\n`);
-  lines.add(` * Therefore it is highly recommended to use the babel or swc plugin for production.\n */\n`);
+  lines.add(` * Therefore it is highly recommended to use the babel or swc plugin for production.\n`);
+  lines.add(
+    ` * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size\n */\n`
+  );
   lines.add(`const documents = {\n`);
 
   for (const { operations, ...rest } of sourcesWithOperations) {
diff --git a/packages/presets/client/tests/client-preset.spec.ts b/packages/presets/client/tests/client-preset.spec.ts
@@ -49,6 +49,7 @@ export * from "./gql";`);
        * 3. It does not support dead code elimination, so it will add unused operations.
        *
        * Therefore it is highly recommended to use the babel or swc plugin for production.
+       * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
        */
       const documents = {
           "\\n  query A {\\n    a\\n  }\\n": types.ADocument,
@@ -136,6 +137,7 @@ export * from "./gql";`);
        * 3. It does not support dead code elimination, so it will add unused operations.
        *
        * Therefore it is highly recommended to use the babel or swc plugin for production.
+       * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
        */
       const documents = {
           "\\n  query a {\\n    a\\n  }\\n": types.ADocument,
@@ -215,6 +217,7 @@ export * from "./gql";`);
        * 3. It does not support dead code elimination, so it will add unused operations.
        *
        * Therefore it is highly recommended to use the babel or swc plugin for production.
+       * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
        */
       const documents = {
           "\\n  query a {\\n    a\\n  }\\n": types.ADocument,
@@ -295,6 +298,7 @@ export * from "./gql";`);
        * 3. It does not support dead code elimination, so it will add unused operations.
        *
        * Therefore it is highly recommended to use the babel or swc plugin for production.
+       * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
        */
       const documents = {
           "\\n  query A {\\n    a\\n  }\\n": types.ADocument,
@@ -425,6 +429,7 @@ export * from "./gql";`);
        * 3. It does not support dead code elimination, so it will add unused operations.
        *
        * Therefore it is highly recommended to use the babel or swc plugin for production.
+       * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
        */
       const documents = {
           "\\n  query A {\\n    a\\n  }\\n": types.ADocument,
@@ -548,6 +553,7 @@ export * from "./gql";`);
        * 3. It does not support dead code elimination, so it will add unused operations.
        *
        * Therefore it is highly recommended to use the babel or swc plugin for production.
+       * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
        */
       const documents = {
           "\\n  query a {\\n    a\\n  }\\n": types.ADocument,
@@ -661,6 +667,7 @@ export * from "./gql";`);
          * 3. It does not support dead code elimination, so it will add unused operations.
          *
          * Therefore it is highly recommended to use the babel or swc plugin for production.
+         * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
          */
         const documents = {
             "\\n  query A {\\n    a\\n  }\\n": types.ADocument,
@@ -1008,6 +1015,7 @@ export * from "./gql.js";`);
        * 3. It does not support dead code elimination, so it will add unused operations.
        *
        * Therefore it is highly recommended to use the babel or swc plugin for production.
+       * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
        */
       const documents = {
           "\\n  query A {\\n    a\\n  }\\n": types.ADocument,
@@ -2682,6 +2690,7 @@ export * from "./gql.js";`);
          * 3. It does not support dead code elimination, so it will add unused operations.
          *
          * Therefore it is highly recommended to use the babel or swc plugin for production.
+         * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
          */
         const documents = {
             "\\n  query Foo {\\n    foo {\\n      ...Foo\\n    }\\n  }\\n": types.FooDocument,

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/`
`11`	`11`	`* 3. It does not support dead code elimination, so it will add unused operations.`
`12`	`12`	`*`
`13`	`13`	`* Therefore it is highly recommended to use the babel or swc plugin for production.`
	`14`	`+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size`
`14`	`15`	`*/`
`15`	`16`	`const documents = {`
`16`	`17`	`'\n fragment TweetFragment on Tweet {\n id\n body\n ...TweetAuthorFragment\n }\n':`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@ import * as types from './graphql';`
`10`	`10`	`* 3. It does not support dead code elimination, so it will add unused operations.`
`11`	`11`	`*`
`12`	`12`	`* Therefore it is highly recommended to use the babel or swc plugin for production.`
	`13`	`+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size`
`13`	`14`	`*/`
`14`	`15`	`const documents = {`
`15`	`16`	`'\n query HelloQuery {\n hello\n }\n': types.HelloQueryDocument,`