[typescript-operations] Handle printing types consistently when types are any and unknown

.changeset/free-fans-dance.md

@@ -0,0 +1,6 @@
+---
+'@graphql-codegen/visitor-plugin-common': patch
+'@graphql-codegen/typescript-operations': patch
+---
+
+Add printTypeScriptType to handle printing TS types, as there are special cases like `any` and `unknown`

packages/plugins/other/visitor-plugin-common/src/utils.ts

@@ -687,3 +687,31 @@ const getDeprecationReason = (directive: DirectiveNode): string | void => {
     return reason;
   }
 };
+
+/**
+ * @description Utility function to print a TypeScript type.
+ * We need this since some TypeScript types have special handling.
+ * e.g. `unknown | null | undefined` is treated as `unknown`
+ *
+ * Note: we currently have two types of handling nullable: `Maybe<T>` or `T | null | undefined`
+ * This function only handles the latter case at the moment, but could be extended if needed.
+ */
+export const printTypeScriptType = ({
+  type,
+  isNullable,
+  nullableSuffix,
+}: {
+  type: string;
+  nullableSuffix: string;
+  isNullable: boolean;
+}): string => {
+  if (type === 'any' || type === 'unknown') {
+    return type;
+  }
+
+  if (isNullable) {
+    return `${type}${nullableSuffix}`;
+  }
+
+  return type;
+};

packages/plugins/typescript/operations/src/ts-operation-variables-to-object.ts

@@ -4,6 +4,7 @@ import {
   NormalizedAvoidOptionalsConfig,
   NormalizedScalarsMap,
   ParsedEnumValuesMap,
+  printTypeScriptType,
 } from '@graphql-codegen/visitor-plugin-common';
 import { Kind, TypeNode } from 'graphql';
 
@@ -96,6 +97,8 @@ export class TypeScriptOperationVariablesToObject extends OperationVariablesToOb
   protected wrapMaybe(type: string): string {
     const maybeSuffix = this._config.inputMaybeValueSuffix;
 
-    return type.endsWith(maybeSuffix) ? type : `${type}${maybeSuffix}`;
+    return type.endsWith(maybeSuffix)
+      ? type
+      : printTypeScriptType({ type, isNullable: true, nullableSuffix: maybeSuffix });
   }
 }

packages/plugins/typescript/operations/src/visitor.ts

@@ -22,6 +22,7 @@ import {
   SelectionSetToObject,
   getNodeComment,
   wrapTypeWithModifiers,
+  printTypeScriptType,
 } from '@graphql-codegen/visitor-plugin-common';
 import { normalizeImportExtension } from '@graphql-codegen/plugin-helpers';
 import autoBind from 'auto-bind';
@@ -277,15 +278,23 @@ export class TypeScriptDocumentsVisitor extends BaseDocumentsVisitor<
 
         typePart = usedInputType.tsType; // If the schema is correct, when reversing typeNodes, the first node would be `NamedType`, which means we can safely set it as the base for typePart
         if (!typeNode.isNonNullable) {
-          typePart += this._inputMaybeValueSuffix;
+          typePart = printTypeScriptType({
+            type: typePart,
+            isNullable: true,
+            nullableSuffix: this._inputMaybeValueSuffix,
+          });
         }
         continue;
       }
 
       if (typeNode.type === 'ListType') {
         typePart = `Array<${typePart}>`;
         if (!typeNode.isNonNullable) {
-          typePart += this._inputMaybeValueSuffix;
+          typePart = printTypeScriptType({
+            type: typePart,
+            isNullable: true,
+            nullableSuffix: this._inputMaybeValueSuffix,
+          });
         }
       }
     }

packages/plugins/typescript/operations/tests/ts-documents.spec.ts

@@ -2749,7 +2749,7 @@ export type Q2Query = { search: Array<
       expect(content).toMatchInlineSnapshot(
         `
         "export type TestQueryQueryVariables = Exact<{
-          test?: unknown | null | undefined;
+          test?: unknown;
         }>;
 
 

packages/plugins/typescript/operations/tests/ts-documents.standalone.default-scalar-types.spec.ts

@@ -70,18 +70,18 @@ describe('TypeScript Operations Plugin - Default Scalar types', () => {
       export type Incremental<T> = T | { [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never };
       type UserInput = {
         nonNullableDate: unknown;
-        nullableDate?: unknown | null | undefined;
-        dateArray1?: Array<unknown | null | undefined> | null | undefined;
-        dateArray2: Array<unknown | null | undefined>;
+        nullableDate?: unknown;
+        dateArray1?: Array<unknown> | null | undefined;
+        dateArray2: Array<unknown>;
         dateArray3?: Array<unknown> | null | undefined;
         dateArray4: Array<unknown>;
       };
 
       export type UserQueryVariables = Exact<{
         nonNullableDate: unknown;
-        nullableDate?: unknown | null | undefined;
-        dateArray1?: Array<unknown | null | undefined> | unknown | null | undefined;
-        dateArray2: Array<unknown | null | undefined> | unknown;
+        nullableDate?: unknown;
+        dateArray1?: Array<unknown> | unknown | null | undefined;
+        dateArray2: Array<unknown> | unknown;
         dateArray3?: Array<unknown> | unknown | null | undefined;
         dateArray4: Array<unknown> | unknown;
         input: UserInput;
@@ -163,18 +163,18 @@ describe('TypeScript Operations Plugin - Default Scalar types', () => {
       export type Incremental<T> = T | { [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never };
       type UserInput = {
         nonNullableDate: any;
-        nullableDate?: any | null | undefined;
-        dateArray1?: Array<any | null | undefined> | null | undefined;
-        dateArray2: Array<any | null | undefined>;
+        nullableDate?: any;
+        dateArray1?: Array<any> | null | undefined;
+        dateArray2: Array<any>;
         dateArray3?: Array<any> | null | undefined;
         dateArray4: Array<any>;
       };
 
       export type UserQueryVariables = Exact<{
         nonNullableDate: any;
-        nullableDate?: any | null | undefined;
-        dateArray1?: Array<any | null | undefined> | any | null | undefined;
-        dateArray2: Array<any | null | undefined> | any;
+        nullableDate?: any;
+        dateArray1?: Array<any> | any | null | undefined;
+        dateArray2: Array<any> | any;
         dateArray3?: Array<any> | any | null | undefined;
         dateArray4: Array<any> | any;
         input: UserInput;

packages/plugins/typescript/operations/tests/ts-documents.standalone.import-types.spec.ts

@@ -110,9 +110,9 @@ describe('TypeScript Operations Plugin - Import Types', () => {
       /** UsersInput Description */
       type UsersInput = {
         /** UsersInput from */
-        from?: unknown | null | undefined;
+        from?: unknown;
         /** UsersInput to */
-        to?: unknown | null | undefined;
+        to?: unknown;
         role?: UserRole | null | undefined;
       };
 
@@ -135,7 +135,7 @@ describe('TypeScript Operations Plugin - Import Types', () => {
 
       export type UsersWithScalarInputQueryVariables = Exact<{
         from: unknown;
-        to?: unknown | null | undefined;
+        to?: unknown;
         role?: TypeImport.UserRole | null | undefined;
       }>;
 
@@ -254,9 +254,9 @@ describe('TypeScript Operations Plugin - Import Types', () => {
       /** UsersInput Description */
       type UsersInput = {
         /** UsersInput from */
-        from?: unknown | null | undefined;
+        from?: unknown;
         /** UsersInput to */
-        to?: unknown | null | undefined;
+        to?: unknown;
         role?: UserRole | null | undefined;
       };
 
@@ -279,7 +279,7 @@ describe('TypeScript Operations Plugin - Import Types', () => {
 
       export type UsersWithScalarInputQueryVariables = Exact<{
         from: unknown;
-        to?: unknown | null | undefined;
+        to?: unknown;
         role?: TypeImport.UserRole | null | undefined;
       }>;
 

packages/plugins/typescript/operations/tests/ts-documents.standalone.input.spec.ts

@@ -102,7 +102,7 @@ describe('TypeScript Operations Plugin - Input', () => {
         from?: Date | null | undefined;
         /** UsersInput to */
         to?: Date | null | undefined;
-        timezone?: unknown | null | undefined;
+        timezone?: unknown;
         role?: UserRole | null | undefined;
         ageRange1?: Array<number | null | undefined> | null | undefined;
         ageRange2: Array<number | null | undefined>;
@@ -219,7 +219,7 @@ describe('TypeScript Operations Plugin - Input', () => {
         readonly from?: Date | null | undefined;
         /** UsersInput to */
         readonly to?: Date | null | undefined;
-        readonly timezone?: unknown | null | undefined;
+        readonly timezone?: unknown;
         readonly role?: UserRole | null | undefined;
         readonly ageRange1?: Array<number | null | undefined> | null | undefined;
         readonly ageRange2: Array<number | null | undefined>;

packages/plugins/typescript/operations/tests/ts-documents.standalone.spec.ts

@@ -138,9 +138,9 @@ describe('TypeScript Operations Plugin - Standalone', () => {
       /** UsersInput Description */
       type UsersInput = {
         /** UsersInput from */
-        from?: unknown | null | undefined;
+        from?: unknown;
         /** UsersInput to */
-        to?: unknown | null | undefined;
+        to?: unknown;
         role?: UserRole | null | undefined;
       };
 
@@ -163,7 +163,7 @@ describe('TypeScript Operations Plugin - Standalone', () => {
 
       export type UsersWithScalarInputQueryVariables = Exact<{
         from: unknown;
-        to?: unknown | null | undefined;
+        to?: unknown;
         role?: UserRole | null | undefined;
       }>;
 
@@ -654,9 +654,9 @@ describe('TypeScript Operations Plugin - Standalone', () => {
       /** UsersInput Description */
       type UsersInput = {
         /** UsersInput from */
-        from?: unknown | null | undefined;
+        from?: unknown;
         /** UsersInput to */
-        to?: unknown | null | undefined;
+        to?: unknown;
         role?: UserRole | null | undefined;
       };
       "