diff --git a/packages/plugins/other/visitor-plugin-common/CHANGELOG.md b/packages/plugins/other/visitor-plugin-common/CHANGELOG.md
index fd440507b70..de7ecb05dde 100644
--- a/packages/plugins/other/visitor-plugin-common/CHANGELOG.md
+++ b/packages/plugins/other/visitor-plugin-common/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @graphql-codegen/visitor-plugin-common
 
+## 7.1.0
+
+### Minor Changes
+
+- [#10863](https://github.com/dotansimha/graphql-code-generator/pull/10863)
+  [`8707247`](https://github.com/dotansimha/graphql-code-generator/commit/8707247857ecd77aaed6930b9eb6985323350932)
+  Thanks [@eddeee888](https://github.com/eddeee888)! - Create `typedDocumentString` to support
+  `TypedDocumentString` usage (common in Client-side plugins when documentMode=string)
+
 ## 7.0.4
 
 ### Patch Changes
diff --git a/packages/plugins/other/visitor-plugin-common/package.json b/packages/plugins/other/visitor-plugin-common/package.json
index c74349e4e43..5e3e5d1509d 100644
--- a/packages/plugins/other/visitor-plugin-common/package.json
+++ b/packages/plugins/other/visitor-plugin-common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@graphql-codegen/visitor-plugin-common",
-  "version": "7.0.4",
+  "version": "7.1.0",
   "type": "module",
   "repository": {
     "type": "git",
diff --git a/packages/plugins/other/visitor-plugin-common/src/index.ts b/packages/plugins/other/visitor-plugin-common/src/index.ts
index b0a07031317..df4eceb2c51 100644
--- a/packages/plugins/other/visitor-plugin-common/src/index.ts
+++ b/packages/plugins/other/visitor-plugin-common/src/index.ts
@@ -21,3 +21,4 @@ export * from './utils.js';
 export * from './variables-to-object.js';
 export * from './convert-schema-enum-to-declaration-block-string.js';
 export * from './graphql-type-utils.js';
+export { typedDocumentString } from './typed-document-string.js';
diff --git a/packages/plugins/other/visitor-plugin-common/src/typed-document-string.ts b/packages/plugins/other/visitor-plugin-common/src/typed-document-string.ts
new file mode 100644
index 00000000000..58cac2f4467
--- /dev/null
+++ b/packages/plugins/other/visitor-plugin-common/src/typed-document-string.ts
@@ -0,0 +1,36 @@
+export const typedDocumentString = {
+  /**
+   * This is a utility template required by plugins that use `documentMode=string`
+   * The class acts as a wrapper of string, and allows typing the string with
+   * GraphQL `Result` and `Variables` types.
+   */
+  template: `export class TypedDocumentString<TResult, TVariables>
+  extends String
+  implements DocumentTypeDecoration<TResult, TVariables>
+{
+  __apiType?: NonNullable<DocumentTypeDecoration<TResult, TVariables>['__apiType']>;
+  private value: string;
+  public __meta__?: Record<string, any> | undefined;
+
+  constructor(value: string, __meta__?: Record<string, any> | undefined) {
+    super(value);
+    this.value = value;
+    this.__meta__ = __meta__;
+  }
+
+  override toString(): string & DocumentTypeDecoration<TResult, TVariables> {
+    return this.value;
+  }
+}`,
+  /**
+   * `TypedDocumentString` class above needs `DocumentTypeDecoration` from `@graphql-typed-document-node/core`
+   * This `imports` object helps when generating the import statement.
+   *
+   * This intentionally follows [ClientSideBaseVisitor#_generateImport()]({@link https://github.com/dotansimha/graphql-code-generator/blob/master/packages/plugins/other/visitor-plugin-common/src/client-side-base-visitor.ts})
+   * to make it easier to use.
+   */
+  import: {
+    moduleName: '@graphql-typed-document-node/core',
+    propName: 'DocumentTypeDecoration',
+  },
+};
diff --git a/packages/plugins/typescript/typed-document-node/CHANGELOG.md b/packages/plugins/typescript/typed-document-node/CHANGELOG.md
index 8d4d37e8843..ecf9ce8a1a6 100644
--- a/packages/plugins/typescript/typed-document-node/CHANGELOG.md
+++ b/packages/plugins/typescript/typed-document-node/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @graphql-codegen/typed-document-node
 
+## 7.0.3
+
+### Patch Changes
+
+- [#10863](https://github.com/dotansimha/graphql-code-generator/pull/10863)
+  [`8707247`](https://github.com/dotansimha/graphql-code-generator/commit/8707247857ecd77aaed6930b9eb6985323350932)
+  Thanks [@eddeee888](https://github.com/eddeee888)! - Use `typedDocumentString` from
+  @graphql-codegen/visitor-plugin-common instead of the inlined version
+- Updated dependencies
+  [[`8707247`](https://github.com/dotansimha/graphql-code-generator/commit/8707247857ecd77aaed6930b9eb6985323350932)]:
+  - @graphql-codegen/visitor-plugin-common@7.1.0
+
 ## 7.0.2
 
 ### Patch Changes
diff --git a/packages/plugins/typescript/typed-document-node/package.json b/packages/plugins/typescript/typed-document-node/package.json
index 4219ad4330b..831313c1fd2 100644
--- a/packages/plugins/typescript/typed-document-node/package.json
+++ b/packages/plugins/typescript/typed-document-node/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@graphql-codegen/typed-document-node",
-  "version": "7.0.2",
+  "version": "7.0.3",
   "type": "module",
   "description": "GraphQL Code Generator plugin for generating ready-to-use TypedDocumentNode based on GraphQL operations",
   "repository": {
diff --git a/packages/plugins/typescript/typed-document-node/src/index.ts b/packages/plugins/typescript/typed-document-node/src/index.ts
index 5d1e156fef8..5b44bbb3428 100644
--- a/packages/plugins/typescript/typed-document-node/src/index.ts
+++ b/packages/plugins/typescript/typed-document-node/src/index.ts
@@ -6,6 +6,7 @@ import {
   LoadedFragment,
   optimizeOperations,
   RawClientSideBasePluginConfig,
+  typedDocumentString,
 } from '@graphql-codegen/visitor-plugin-common';
 import { TypeScriptTypedDocumentNodesConfig } from './config.js';
 import { TypeScriptDocumentNodesVisitor } from './visitor.js';
@@ -39,27 +40,7 @@ export const plugin: PluginFunction<TypeScriptTypedDocumentNodesConfig> = (
 
   let content: string[] = [];
   if (config.documentMode === DocumentMode.string) {
-    content = [
-      `\
-export class TypedDocumentString<TResult, TVariables>
-  extends String
-  implements DocumentTypeDecoration<TResult, TVariables>
-{
-  __apiType?: NonNullable<DocumentTypeDecoration<TResult, TVariables>['__apiType']>;
-  private value: string;
-  public __meta__?: Record<string, any> | undefined;
-
-  constructor(value: string, __meta__?: Record<string, any> | undefined) {
-    super(value);
-    this.value = value;
-    this.__meta__ = __meta__;
-  }
-
-  override toString(): string & DocumentTypeDecoration<TResult, TVariables> {
-    return this.value;
-  }
-}`,
-    ];
+    content = [typedDocumentString.template];
   }
 
   return {
diff --git a/packages/plugins/typescript/typed-document-node/src/visitor.ts b/packages/plugins/typescript/typed-document-node/src/visitor.ts
index 39bea7a28cb..4ea5eabd66f 100644
--- a/packages/plugins/typescript/typed-document-node/src/visitor.ts
+++ b/packages/plugins/typescript/typed-document-node/src/visitor.ts
@@ -7,6 +7,7 @@ import {
   DocumentMode,
   LoadedFragment,
   RawClientSideBasePluginConfig,
+  typedDocumentString,
 } from '@graphql-codegen/visitor-plugin-common';
 
 interface TypeScriptDocumentNodesVisitorPluginConfig extends RawClientSideBasePluginConfig {
@@ -50,11 +51,8 @@ export class TypeScriptDocumentNodesVisitor extends ClientSideBaseVisitor<
       this._imports.add(tagImport);
     } else if (this.config.documentMode === DocumentMode.string) {
       const tagImport = this._generateImport(
-        {
-          moduleName: '@graphql-typed-document-node/core',
-          propName: 'DocumentTypeDecoration',
-        },
-        'DocumentTypeDecoration',
+        typedDocumentString.import,
+        typedDocumentString.import.propName,
         true,
       );
       this._imports.add(tagImport);