plugin typed-document-mode with documentMode "string" cannot handle unescaped backticks/backslashes/dollar-signs in GraphQL description strings

[gibson042]

Which packages are impacted by your issue?

@graphql-codegen/visitor-plugin-common, @graphql-codegen/cli, @graphql-codegen/typed-document-node, @graphql-codegen/client-preset

Describe the bug

The output for documentMode "string" is incorrect when a backtick ` appears in a source GraphQL document (e.g., in a description string), because plugin @graphql-codegen/visitor-plugin-common's ClientSideBaseVisitor _gql method does not account for template literal special characters when building its output. This is somewhat analogous to #2272.

Your Example Website or App

https://stackblitz.com/edit/github-jpcp2x3s?file=document.graphql

Steps to Reproduce the Bug or Issue

1. Create a configuration with documentMode: 'string'.
2. Create a GraphQL document whose contents include an unescaped backtick or backslash or dollar sign, e.g.

   """
   A ` backtick here makes types.ts syntactically invalid
   with documentMode "string".
   """
   query user {
       user(id: 1) {
           id
           username
           email
       }
   }

3. Execute graphql-codegen (e.g., yarn generate in the provided example).
4. Observe the syntactically invalid new TypedDocumentString(`…`) output:

   export const UserDocument = new TypedDocumentString(`
       """
   A ` backtick here makes types.ts syntactically invalid
   with documentMode "string".
   """
   query user {
     user(id: 1) {
       id
       username
       email
     }
   }
       `) as unknown as TypedDocumentString<UserQuery, UserQueryVariables>;

Expected behavior

As a user, I expected any special characters in my input GraphQL document to be properly escaped in the generated output.

Screenshots or Videos

No response

Platform

❯ node -p 'require("./package.json").dependencies'
{
  '@graphql-codegen/add': '^5.0.0',
  '@graphql-codegen/cli': '^4.0.1',
  '@graphql-codegen/typed-document-node': '^6.1.0',
  '@graphql-codegen/typescript': '^4.0.1',
  '@graphql-codegen/typescript-operations': '^4.0.1',
  graphql: '^16.2.0'
}

Codegen Config File

import { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: 'schema.graphql',
  documents: 'document.graphql',
  generates: {
    'types.ts': {
      plugins: ['typescript', 'typescript-operations', 'typed-document-node'],
      config: {
        documentMode: 'string',
      },
    },
  },
};

export default config;

Additional context

No response

[gibson042]

Proposed fix:

diff --git i/packages/plugins/other/visitor-plugin-common/src/client-side-base-visitor.ts w/packages/plugins/other/visitor-plugin-common/src/client-side-base-visitor.ts
index 92e519dae..ec292bea6 100644
--- i/packages/plugins/other/visitor-plugin-common/src/client-side-base-visitor.ts
+++ w/packages/plugins/other/visitor-plugin-common/src/client-side-base-visitor.ts
@@ -19,7 +19,7 @@ import {
 import gqlTag from 'graphql-tag';
 import { BaseVisitor, ParsedConfig, RawConfig } from './base-visitor.js';
 import { LoadedFragment, ParsedImport } from './types.js';
-import { buildScalarsFromConfig, unique, flatten, getConfigValue, groupBy } from './utils.js';
+import { asTemplateLiteral, buildScalarsFromConfig, unique, flatten, getConfigValue, groupBy } from './utils.js';
 import { FragmentImport, ImportDeclaration, generateFragmentImportStatement } from './imports.js';
 
 gqlTag.enableExperimentalFragmentVariables();
@@ -350,10 +350,13 @@ export class ClientSideBaseVisitor<
     const fragmentNames = this._extractFragments(node, includeNestedFragments);
     const fragments = this._transformFragments(fragmentNames);
 
-    const doc = this._prepareDocument(`
-    ${print(node).split('\\').join('\\\\') /* Re-escape escaped values in GraphQL syntax */}
-    ${this._includeFragments(fragments)}`);
+    // Re-escape escaped values in GraphQL syntax.
+    const docLiteralContents = print(node).split('\\').join('\\\\');
+    const fragmentLiteralContents = this._includeFragments(fragments);
 
+    const doc = this._prepareDocument(`
+    ${docLiteralContents}
+    ${fragmentLiteralContents}`);
     if (this.config.documentMode === DocumentMode.documentNode) {
       let gqlObj = gqlTag([doc]);
 
@@ -413,9 +416,13 @@ export class ClientSideBaseVisitor<
       return `{${metaString}"kind":"${Kind.DOCUMENT}","definitions":${jsonStringify(definitions)}}`;
     }
 
+    const escapedDocLiteralContents = asTemplateLiteral(docLiteralContents).slice(1, -1);
+    const escapedDoc = this._prepareDocument(`
+    ${escapedDocLiteralContents}
+    ${fragmentLiteralContents}`);
     if (this.config.documentMode === DocumentMode.string) {
       if (node.kind === Kind.FRAGMENT_DEFINITION) {
-        return `new TypedDocumentString(\`${doc}\`, ${JSON.stringify({ fragmentName: node.name.value })})`;
+        return `new TypedDocumentString(\`${escapedDoc}\`, ${JSON.stringify({ fragmentName: node.name.value })})`;
       }
 
       if (this._onExecutableDocumentNode && node.kind === Kind.OPERATION_DEFINITION) {
@@ -425,16 +432,16 @@ export class ClientSideBaseVisitor<
           if (this._omitDefinitions === true) {
             return `{${`"__meta__":${JSON.stringify(meta)},`.slice(0, -1)}}`;
           }
-          return `new TypedDocumentString(\`${doc}\`, ${JSON.stringify(meta)})`;
+          return `new TypedDocumentString(\`${escapedDoc}\`, ${JSON.stringify(meta)})`;
         }
       }
 
-      return `new TypedDocumentString(\`${doc}\`)`;
+      return `new TypedDocumentString(\`${escapedDoc}\`)`;
     }
 
     const gqlImport = this._parseImport(this.config.gqlImport || 'graphql-tag');
 
-    return (gqlImport.propName || 'gql') + '`' + doc + '`';
+    return (gqlImport.propName || 'gql') + '`' + escapedDoc + '`';
   }
 
   protected _getGraphQLCodegenMetadata(
diff --git i/packages/plugins/other/visitor-plugin-common/src/utils.ts w/packages/plugins/other/visitor-plugin-common/src/utils.ts
index a224ffc08..06277c6e5 100644
--- i/packages/plugins/other/visitor-plugin-common/src/utils.ts
+++ w/packages/plugins/other/visitor-plugin-common/src/utils.ts
@@ -28,6 +28,8 @@ import { parseMapper } from './mappers.js';
 import { DEFAULT_SCALARS } from './scalars.js';
 import { NormalizedScalarsMap, ParsedScalarsMap, ScalarsMap, FragmentDirectives, LoadedFragment } from './types.js';
 
+export const asTemplateLiteral = str => '`' + str.replace(/[`$\\]/g, '\\$&') + '`';
+
 export const getConfigValue = <T = any>(value: T, defaultValue: T): T => {
   if (value === null || value === undefined) {
     return defaultValue;

[eddeee888]

Thanks @gibson042 , would you like to send through a PR ? 🙂

[gibson042]

Started one at #10482, but I think I'll need help with ensuring test coverage.