Add TypedDocumentNode string alternative (#9137)

Author: beerose

.changeset/@graphql-codegen_client-preset-9137-dependencies.md

@@ -0,0 +1,5 @@
+---
+"@graphql-codegen/client-preset": patch
+---
+dependencies updates:
+  - Updated dependency [`@graphql-typed-document-node/[email protected]` ↗︎](https://www.npmjs.com/package/@graphql-typed-document-node/core/v/3.2.0) (from `3.1.2`, in `dependencies`)

.changeset/gold-dragons-poke.md

@@ -0,0 +1,8 @@
+---
+'@graphql-codegen/typed-document-node': major
+'@graphql-codegen/gql-tag-operations': major
+'@graphql-codegen/client-preset': major
+'@graphql-codegen/gql-tag-operations-preset': major
+---
+
+Add `TypedDocumentNode` string alternative that doesn't require GraphQL AST on the client. This change requires `@graphql-typed-document-node/core` in version `3.2.0` or higher.

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

@@ -1,48 +1,46 @@
-import { ResultOf, TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+import { ResultOf, DocumentTypeDecoration } from '@graphql-typed-document-node/core';
 
-export type FragmentType<TDocumentType extends DocumentNode<any, any>> = TDocumentType extends DocumentNode<
-  infer TType,
-  any
->
-  ? TType extends { ' $fragmentName'?: infer TKey }
-    ? TKey extends string
-      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> =
+  TDocumentType extends DocumentTypeDecoration<infer TType, any>
+    ? TType extends { ' $fragmentName'?: infer TKey }
+      ? TKey extends string
+        ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+        : never
       : never
-    : never
-  : never;
+    : never;
 
 // return non-nullable if `fragmentType` is non-nullable
 export function useFragment<TType>(
-  _documentNode: DocumentNode<TType, any>,
-  fragmentType: FragmentType<DocumentNode<TType, any>>
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
 ): TType;
 // return nullable if `fragmentType` is nullable
 export function useFragment<TType>(
-  _documentNode: DocumentNode<TType, any>,
-  fragmentType: FragmentType<DocumentNode<TType, any>> | null | undefined
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
 ): TType | null | undefined;
 // return array of non-nullable if `fragmentType` is array of non-nullable
 export function useFragment<TType>(
-  _documentNode: DocumentNode<TType, any>,
-  fragmentType: ReadonlyArray<FragmentType<DocumentNode<TType, any>>>
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
 ): ReadonlyArray<TType>;
 // return array of nullable if `fragmentType` is array of nullable
 export function useFragment<TType>(
-  _documentNode: DocumentNode<TType, any>,
-  fragmentType: ReadonlyArray<FragmentType<DocumentNode<TType, any>>> | null | undefined
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
 ): ReadonlyArray<TType> | null | undefined;
 export function useFragment<TType>(
-  _documentNode: DocumentNode<TType, any>,
+  _documentNode: DocumentTypeDecoration<TType, any>,
   fragmentType:
-    | FragmentType<DocumentNode<TType, any>>
-    | ReadonlyArray<FragmentType<DocumentNode<TType, any>>>
+    | FragmentType<DocumentTypeDecoration<TType, any>>
+    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
     | null
     | undefined
 ): TType | ReadonlyArray<TType> | null | undefined {
   return fragmentType as any;
 }
 
-export function makeFragmentData<F extends DocumentNode, FT extends ResultOf<F>>(
+export function makeFragmentData<F extends DocumentTypeDecoration<any, any>, FT extends ResultOf<F>>(
   data: FT,
   _fragment: F
 ): FragmentType<F> {

examples/persisted-documents-string-mode/README.md

@@ -0,0 +1,11 @@
+# Yoga Persisted Documents Example
+
+Example for showing how to use GraphQL Code Generator for only allowing the execution of persisted operations.
+
+[Learn more about Yoga Persisted Operations](https://the-guild.dev/graphql/yoga-server/docs/features/persisted-operations)
+
+## Usage
+
+Run `yarn codegen --watch` for starting GraphQL Code Generator in watch mode.
+
+Run `yarn test` for running a tests located within `yoga.spec.ts`.

examples/persisted-documents-string-mode/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: process.versions.node.split('.')[0] } }],
+    '@babel/preset-typescript',
+  ],
+};

examples/persisted-documents-string-mode/codegen.ts

@@ -0,0 +1,21 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { type CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+  schema: './src/yoga.ts',
+  documents: ['src/**/*.ts'],
+  generates: {
+    './src/gql/': {
+      preset: 'client-preset',
+      presetConfig: {
+        persistedDocuments: true,
+      },
+      config: {
+        documentMode: 'string',
+      },
+    },
+  },
+  hooks: { afterAllFileWrite: ['prettier --write'] },
+};
+
+export default config;

examples/persisted-documents-string-mode/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  transform: { '^.+\\.ts': 'babel-jest' },
+};

examples/persisted-documents-string-mode/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "example-persisted-documents-string-mode",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "graphql-yoga": "3.7.2",
+    "@graphql-yoga/plugin-persisted-operations": "1.7.2"
+  },
+  "devDependencies": {
+    "@graphql-typed-document-node/core": "3.2.0",
+    "jest": "28.1.3",
+    "babel-jest": "28.1.3",
+    "@graphql-codegen/cli": "3.2.2",
+    "@graphql-codegen/client-preset": "2.1.1",
+    "@babel/core": "7.21.0",
+    "@babel/preset-env": "7.20.2",
+    "@babel/preset-typescript": "7.21.0"
+  },
+  "scripts": {
+    "test": "jest",
+    "codegen": "graphql-codegen --config codegen.ts",
+    "build": "tsc",
+    "test:end2end": "yarn test"
+  },
+  "bob": false
+}

examples/persisted-documents-string-mode/src/gql/fragment-masking.ts

@@ -0,0 +1,48 @@
+import { ResultOf, DocumentTypeDecoration } from '@graphql-typed-document-node/core';
+
+export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> =
+  TDocumentType extends DocumentTypeDecoration<infer TType, any>
+    ? TType extends { ' $fragmentName'?: infer TKey }
+      ? TKey extends string
+        ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+        : never
+      : never
+    : never;
+
+// return non-nullable if `fragmentType` is non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
+): TType;
+// return nullable if `fragmentType` is nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
+): TType | null | undefined;
+// return array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+): ReadonlyArray<TType>;
+// return array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): ReadonlyArray<TType> | null | undefined;
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType:
+    | FragmentType<DocumentTypeDecoration<TType, any>>
+    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+    | null
+    | undefined
+): TType | ReadonlyArray<TType> | null | undefined {
+  return fragmentType as any;
+}
+
+export function makeFragmentData<F extends DocumentTypeDecoration<any, any>, FT extends ResultOf<F>>(
+  data: FT,
+  _fragment: F
+): FragmentType<F> {
+  return data as FragmentType<F>;
+}

examples/persisted-documents-string-mode/src/gql/gql.ts

@@ -0,0 +1,27 @@
+/* eslint-disable */
+import * as types from './graphql';
+
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 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.
+ */
+const documents = {
+  '\n  query HelloQuery {\n    hello\n  }\n': types.HelloQueryDocument,
+};
+
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: '\n  query HelloQuery {\n    hello\n  }\n'
+): typeof import('./graphql').HelloQueryDocument;
+
+export function graphql(source: string) {
+  return (documents as any)[source] ?? {};
+}