change the client-preset generated template. (#8763)

* fix: client preset generated template fix

* lint

* prettier: fix prettier probelm

* changeset: add changeset

* test: pass dev-test

Co-authored-by: elvishe <[email protected]>

Author: ElvisUpUp

.changeset/real-ties-cross.md

@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/gql-tag-operations': minor
+---
+
+change the client-preset generated template

dev-test/gql-tag-operations-masking-star-wars/gql/gql.ts

@@ -19,19 +19,6 @@ const documents = {
     types.HeroDetailsFragmentDoc,
 };
 
-/**
- * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function gql(
-  source: '\n  query HeroDetailsWithFragment($episode: Episode) {\n    hero(episode: $episode) {\n      ...HeroDetails\n    }\n  }\n'
-): typeof documents['\n  query HeroDetailsWithFragment($episode: Episode) {\n    hero(episode: $episode) {\n      ...HeroDetails\n    }\n  }\n'];
-/**
- * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function gql(
-  source: '\n  fragment HeroDetails on Character {\n    __typename\n    name\n    ... on Human {\n      height\n    }\n    ... on Droid {\n      primaryFunction\n    }\n  }\n'
-): typeof documents['\n  fragment HeroDetails on Character {\n    __typename\n    name\n    ... on Human {\n      height\n    }\n    ... on Droid {\n      primaryFunction\n    }\n  }\n'];
-
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  *
@@ -46,6 +33,19 @@ export function gql(
  **/
 export function gql(source: string): unknown;
 
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function gql(
+  source: '\n  query HeroDetailsWithFragment($episode: Episode) {\n    hero(episode: $episode) {\n      ...HeroDetails\n    }\n  }\n'
+): typeof documents['\n  query HeroDetailsWithFragment($episode: Episode) {\n    hero(episode: $episode) {\n      ...HeroDetails\n    }\n  }\n'];
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function gql(
+  source: '\n  fragment HeroDetails on Character {\n    __typename\n    name\n    ... on Human {\n      height\n    }\n    ... on Droid {\n      primaryFunction\n    }\n  }\n'
+): typeof documents['\n  fragment HeroDetails on Character {\n    __typename\n    name\n    ... on Human {\n      height\n    }\n    ... on Droid {\n      primaryFunction\n    }\n  }\n'];
+
 export function gql(source: string) {
   return (documents as any)[source] ?? {};
 }

dev-test/gql-tag-operations-masking/gql/gql.ts

@@ -22,6 +22,20 @@ const documents = {
   '\n  query TweetAppQuery {\n    ...TweetsFragment\n  }\n': types.TweetAppQueryDocument,
 };
 
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = gql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ **/
+export function gql(source: string): unknown;
+
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -47,20 +61,6 @@ export function gql(
   source: '\n  query TweetAppQuery {\n    ...TweetsFragment\n  }\n'
 ): typeof documents['\n  query TweetAppQuery {\n    ...TweetsFragment\n  }\n'];
 
-/**
- * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- *
- *
- * @example
- * ```ts
- * const query = gql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
- * ```
- *
- * The query argument is unknown!
- * Please regenerate the types.
- **/
-export function gql(source: string): unknown;
-
 export function gql(source: string) {
   return (documents as any)[source] ?? {};
 }

dev-test/gql-tag-operations/gql/gql.ts

@@ -18,6 +18,20 @@ const documents = {
   '\n  query Bar {\n    Tweets {\n      ...Lel\n    }\n  }\n': types.BarDocument,
 };
 
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = gql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ **/
+export function gql(source: string): unknown;
+
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -37,20 +51,6 @@ export function gql(
   source: '\n  query Bar {\n    Tweets {\n      ...Lel\n    }\n  }\n'
 ): typeof documents['\n  query Bar {\n    Tweets {\n      ...Lel\n    }\n  }\n'];
 
-/**
- * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- *
- *
- * @example
- * ```ts
- * const query = gql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
- * ```
- *
- * The query argument is unknown!
- * Please regenerate the types.
- **/
-export function gql(source: string): unknown;
-
 export function gql(source: string) {
   return (documents as any)[source] ?? {};
 }

dev-test/gql-tag-operations/graphql/gql.ts

@@ -18,6 +18,20 @@ const documents = {
   '\n  query Bar {\n    Tweets {\n      ...Lel\n    }\n  }\n': types.BarDocument,
 };
 
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = gql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ **/
+export function graphql(source: string): unknown;
+
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -37,20 +51,6 @@ export function graphql(
   source: '\n  query Bar {\n    Tweets {\n      ...Lel\n    }\n  }\n'
 ): typeof documents['\n  query Bar {\n    Tweets {\n      ...Lel\n    }\n  }\n'];
 
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- *
- *
- * @example
- * ```ts
- * const query = gql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
- * ```
- *
- * The query argument is unknown!
- * Please regenerate the types.
- **/
-export function graphql(source: string): unknown;
-
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};
 }

packages/plugins/typescript/gql-tag-operations/src/index.ts

@@ -43,13 +43,7 @@ export const plugin: PluginFunction<{
     ];
 
     if (sourcesWithOperations.length > 0) {
-      code.push(
-        [
-          ...getDocumentRegistryChunk(sourcesWithOperations),
-          `\n`,
-          ...getGqlOverloadChunk(sourcesWithOperations, gqlTagName, 'lookup', emitLegacyCommonJSImports),
-        ].join('')
-      );
+      code.push([...getDocumentRegistryChunk(sourcesWithOperations)].join(''));
     } else {
       code.push('const documents = [];');
     }
@@ -67,13 +61,25 @@ export const plugin: PluginFunction<{
         `**/\n`,
         `export function ${gqlTagName}(source: string): unknown;\n`,
         `\n`,
+      ].join('')
+    );
+
+    if (sourcesWithOperations.length > 0) {
+      code.push(
+        [...getGqlOverloadChunk(sourcesWithOperations, gqlTagName, 'lookup', emitLegacyCommonJSImports), `\n`].join('')
+      );
+    }
+
+    code.push(
+      [
         `export function ${gqlTagName}(source: string) {\n`,
         `  return (documents as any)[source] ?? {};\n`,
         `}\n`,
         `\n`,
         ...documentTypePartial,
       ].join('')
     );
+
     return code.join('');
   }