dotansimha / dotansimha/graphql-code-generator

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

Open
#10,480 3 comments 1 reaction 1 assignee Claimed by @eddeee888 View on GitHub
Dominant language
TypeScript
Stars
11.3k
Forks
1.4k
Avg merge
1d 1h
Merged PRs (30d)
23

Description

### 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](https://spec.graphql.org/September2025/#Description) string), because plugin `@graphql-codegen/visitor-plugin-common`'s [ClientSideBaseVisitor `_gql` method](https://github.com/dotansimha/graphql-code-generator/blob/76a71d9105059176e1265cc4eee78b334fd57d53/packages/plugins/other/visitor-plugin-common/src/client-side-base-visitor.ts#L347) 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.
```graphql
"""
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:
```ts
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;
```

### 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

```console
❯ 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

```ts
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_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.