example of TypedDocumentNode codegen

this is the reference that I followed: https://github.com/dotansimha/graphql-typed-document-node#how-to-use

package.json

@@ -19,6 +19,7 @@
     "test:smoke": "config/scripts/smoke.sh",
     "test:ts": "tsc -p test/typings/tsconfig.json",
     "test:focused": "node node_modules/ts-node/dist/bin.js --project=test/tsconfig.json test/focusedTest.ts",
+    "codegen:test": "graphql-codegen --config test/graphql-api/typed-document-node.codegen.yml",
     "prepublishOnly": "yarn lint && yarn test:unit && yarn build && yarn test:integration",
     "postinstall": "node -e \"try{require('./config/scripts/postinstall')}catch(e){}\""
   },
@@ -87,6 +88,11 @@
   "devDependencies": {
     "@babel/core": "^7.14.3",
     "@babel/preset-env": "^7.14.2",
+    "@graphql-codegen/cli": "^1.21.5",
+    "@graphql-codegen/typed-document-node": "^1.18.6",
+    "@graphql-codegen/typescript": "^1.22.1",
+    "@graphql-codegen/typescript-operations": "^1.18.0",
+    "@graphql-typed-document-node/core": "^3.1.0",
     "@open-draft/test-server": "^0.2.3",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-inject": "^4.0.2",

test/graphql-api/typed-document-node.codegen.yml

@@ -0,0 +1,8 @@
+schema: test/graphql-api/typed-document-node.schema.graphql
+documents: test/graphql-api/typed-document-node.*.graphql
+generates:
+  test/graphql-api/typed-document-node.graphql-operations.ts:
+    plugins:
+      - typescript
+      - typescript-operations
+      - typed-document-node

test/graphql-api/typed-document-node.graphql-operations.ts

@@ -0,0 +1,65 @@
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type Maybe<T> = T | null;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+};
+
+export type Mutation = {
+  __typename?: 'Mutation';
+  login: User;
+};
+
+
+export type MutationLoginArgs = {
+  username: Scalars['String'];
+};
+
+export type Query = {
+  __typename?: 'Query';
+  user: User;
+};
+
+export type User = {
+  __typename?: 'User';
+  id: Scalars['ID'];
+  firstName: Scalars['String'];
+  age: Scalars['Int'];
+};
+
+export type LoginMutationVariables = Exact<{
+  username: Scalars['String'];
+}>;
+
+
+export type LoginMutation = (
+  { __typename?: 'Mutation' }
+  & { login: (
+    { __typename?: 'User' }
+    & Pick<User, 'id'>
+  ) }
+);
+
+export type GetUserDetailQueryVariables = Exact<{
+  userId: Scalars['String'];
+}>;
+
+
+export type GetUserDetailQuery = (
+  { __typename?: 'Query' }
+  & { user: (
+    { __typename?: 'User' }
+    & Pick<User, 'id' | 'firstName' | 'age'>
+  ) }
+);
+
+
+export const LoginDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"Login"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"username"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"login"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"username"},"value":{"kind":"Variable","name":{"kind":"Name","value":"username"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<LoginMutation, LoginMutationVariables>;
+export const GetUserDetailDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetUserDetail"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"userId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"firstName"}},{"kind":"Field","name":{"kind":"Name","value":"age"}}]}}]}}]} as unknown as DocumentNode<GetUserDetailQuery, GetUserDetailQueryVariables>;

test/graphql-api/typed-document-node.mutation.graphql

@@ -0,0 +1,5 @@
+mutation Login($username: String!) {
+  login(username: $username) {
+    id
+  }
+}

test/graphql-api/typed-document-node.query.graphql

@@ -0,0 +1,7 @@
+query GetUserDetail($userId: String!) {
+  user {
+    id
+    firstName
+    age
+  }
+}

test/graphql-api/typed-document-node.schema.graphql

@@ -0,0 +1,13 @@
+type User {
+  id: ID!
+  firstName: String!
+  age: Int!
+}
+
+type Query {
+  user: User!
+}
+
+type Mutation {
+  login(username: String!): User!
+}