Fix type generation of nullable types in TypeScript (#4380)

Summary:
Closes: #4379

## Release Notes

Previously, the relay-compiler would generate a union of the actual type and `null` (`T | null`) for nullable fields when targeting TypeScript. This was not correct, since the Relay store can also return `undefined` in the case of missing data. This version now produces a union of the actual type, `null` and `undefined` (`T | null | undefined`).
Consequently you now also have to check both the `null` and `undefined` case, before accessing a field's value:

```ts
const data = useLazyLoadQuery(/* ... */);

// Notice the `!=` instead of `!==` to check against null and undefined
if (data.nullableField != null)
{
  // Safely access data.nullableField
}
```

Since this is a pretty big change, we're offering the `typescriptExcludeUndefinedFromNullableUnion` feature flag in the `relay-compiler` config to keep the old type generation behavior for now:

```json
{
  "language": "typescript",
  "typescriptExcludeUndefinedFromNullableUnion": true
}
```

Just be aware that we will remove this feature flag in a future release and that you might run into an unexpected `undefined`, if you're not checking for `undefined` before accessing a field - especially if it's a client-only field.

Pull Request resolved: #4380

Reviewed By: alunyov

Differential Revision: D48989476

Pulled By: captbaritone

fbshipit-source-id: 52c5f215298de50e8506245a9d6696e1e935fc2a

Author: tobias-tengler

compiler/crates/relay-config/src/typegen_config.rs

@@ -108,6 +108,12 @@ pub struct TypegenConfig {
     /// This option enables emitting es modules artifacts.
     #[serde(default)]
     pub eager_es_modules: bool,
+
+    /// Keep the previous compiler behavior by outputting an union
+    /// of the raw type and null, and not the **correct** behavior
+    /// of an union with the raw type, null and undefined.
+    #[serde(default)]
+    pub typescript_exclude_undefined_from_nullable_union: bool,
 }
 
 #[derive(Default, Debug, Serialize, Deserialize, Clone, Copy)]

compiler/crates/relay-typegen/src/typescript.rs

@@ -26,6 +26,7 @@ use crate::KEY_FRAGMENT_TYPE;
 pub struct TypeScriptPrinter {
     result: String,
     use_import_type_syntax: bool,
+    include_undefined_in_nullable_union: bool,
     indentation: usize,
 }
 
@@ -170,6 +171,8 @@ impl TypeScriptPrinter {
             result: String::new(),
             indentation: 0,
             use_import_type_syntax: config.use_import_type_syntax,
+            include_undefined_in_nullable_union: !config
+                .typescript_exclude_undefined_from_nullable_union,
         }
     }
 
@@ -212,13 +215,21 @@ impl TypeScriptPrinter {
 
     fn write_nullable(&mut self, of_type: &AST) -> FmtResult {
         let null_type = AST::RawType("null".intern());
+        let undefined_type = AST::RawType("undefined".intern());
         if let AST::Union(members) = of_type {
             let mut new_members = Vec::with_capacity(members.len() + 1);
             new_members.extend_from_slice(members);
             new_members.push(null_type);
+            if self.include_undefined_in_nullable_union {
+                new_members.push(undefined_type);
+            }
             self.write_union(&*new_members)?;
         } else {
-            self.write_union(&*vec![of_type.clone(), null_type])?;
+            let mut union_members = vec![of_type.clone(), null_type];
+            if self.include_undefined_in_nullable_union {
+                union_members.push(undefined_type)
+            }
+            self.write_union(&*union_members)?;
         }
         Ok(())
     }
@@ -387,14 +398,14 @@ mod tests {
     fn nullable_type() {
         assert_eq!(
             print_type(&AST::Nullable(Box::new(AST::String))),
-            "string | null".to_string()
+            "string | null | undefined".to_string()
         );
 
         assert_eq!(
             print_type(&AST::Nullable(Box::new(AST::Union(SortedASTList::new(
                 vec![AST::String, AST::Number],
             ))))),
-            "string | number | null"
+            "string | number | null | undefined"
         )
     }
 

compiler/crates/relay-typegen/tests/generate_typescript/fixtures/aliased-fragment-raw-response-type.expected

@@ -17,18 +17,18 @@ export type MyQuery$variables = {};
 export type MyQuery$data = {
   readonly me: {
     readonly my_inline_fragment: {
-      readonly name: string | null;
-    } | null;
+      readonly name: string | null | undefined;
+    } | null | undefined;
     readonly my_user: {
       readonly " $fragmentSpreads": FragmentRefs<"MyUserFragment">;
-    } | null;
-  } | null;
+    } | null | undefined;
+  } | null | undefined;
 };
 export type MyQuery$rawResponse = {
   readonly me: {
     readonly id: string;
-    readonly name: string | null;
-  } | null;
+    readonly name: string | null | undefined;
+  } | null | undefined;
 };
 export type MyQuery = {
   rawResponse: MyQuery$rawResponse;
@@ -38,7 +38,7 @@ export type MyQuery = {
 -------------------------------------------------------------------------------
 import { FragmentRefs } from "relay-runtime";
 export type MyUserFragment$data = {
-  readonly name: string | null;
+  readonly name: string | null | undefined;
   readonly " $fragmentType": "MyUserFragment";
 };
 export type MyUserFragment$key = {

compiler/crates/relay-typegen/tests/generate_typescript/fixtures/aliased-fragment-spread-in-abstract-selection.expected

@@ -15,8 +15,8 @@ export type RelayReaderNamedFragmentsTest2Query$data = {
   readonly node: {
     readonly named_fragment: {
       readonly " $fragmentSpreads": FragmentRefs<"RelayReaderNamedFragmentsTest_maybe_node_interface">;
-    } | null;
-  } | null;
+    } | null | undefined;
+  } | null | undefined;
 };
 export type RelayReaderNamedFragmentsTest2Query = {
   response: RelayReaderNamedFragmentsTest2Query$data;
@@ -25,7 +25,7 @@ export type RelayReaderNamedFragmentsTest2Query = {
 -------------------------------------------------------------------------------
 import { FragmentRefs } from "relay-runtime";
 export type RelayReaderNamedFragmentsTest_maybe_node_interface$data = {
-  readonly name: string | null;
+  readonly name: string | null | undefined;
   readonly " $fragmentType": "RelayReaderNamedFragmentsTest_maybe_node_interface";
 };
 export type RelayReaderNamedFragmentsTest_maybe_node_interface$key = {

compiler/crates/relay-typegen/tests/generate_typescript/fixtures/aliased-fragment-spread.expected

@@ -15,8 +15,8 @@ export type RelayReaderNamedFragmentsTest2Query$data = {
   readonly me: {
     readonly named_fragment: {
       readonly " $fragmentSpreads": FragmentRefs<"RelayReaderNamedFragmentsTest_user">;
-    } | null;
-  } | null;
+    } | null | undefined;
+  } | null | undefined;
 };
 export type RelayReaderNamedFragmentsTest2Query = {
   response: RelayReaderNamedFragmentsTest2Query$data;
@@ -25,7 +25,7 @@ export type RelayReaderNamedFragmentsTest2Query = {
 -------------------------------------------------------------------------------
 import { FragmentRefs } from "relay-runtime";
 export type RelayReaderNamedFragmentsTest_user$data = {
-  readonly name: string | null;
+  readonly name: string | null | undefined;
   readonly " $fragmentType": "RelayReaderNamedFragmentsTest_user";
 };
 export type RelayReaderNamedFragmentsTest_user$key = {

compiler/crates/relay-typegen/tests/generate_typescript/fixtures/aliased-inline-fragment-spread-without-type-condition-fragment-root.expected

@@ -8,8 +8,8 @@ fragment Foo on User {
 import { FragmentRefs } from "relay-runtime";
 export type Foo$data = {
   readonly named_fragment: {
-    readonly name: string | null;
-  } | null;
+    readonly name: string | null | undefined;
+  } | null | undefined;
   readonly " $fragmentType": "Foo";
 };
 export type Foo$key = {

compiler/crates/relay-typegen/tests/generate_typescript/fixtures/aliased-inline-fragment-spread-without-type-condition-linked-field.expected

@@ -13,9 +13,9 @@ export type RelayReaderNamedFragmentsTest2Query$data = {
   readonly me: {
     readonly id: string;
     readonly named_fragment: {
-      readonly name: string | null;
-    } | null;
-  } | null;
+      readonly name: string | null | undefined;
+    } | null | undefined;
+  } | null | undefined;
 };
 export type RelayReaderNamedFragmentsTest2Query = {
   response: RelayReaderNamedFragmentsTest2Query$data;

compiler/crates/relay-typegen/tests/generate_typescript/fixtures/aliased-inline-fragment-spread-without-type-condition-query-root.expected

@@ -13,9 +13,9 @@ export type RelayReaderNamedFragmentsTest2Query$data = {
   readonly named_fragment: {
     readonly me: {
       readonly id: string;
-      readonly name: string | null;
-    } | null;
-  } | null;
+      readonly name: string | null | undefined;
+    } | null | undefined;
+  } | null | undefined;
 };
 export type RelayReaderNamedFragmentsTest2Query = {
   response: RelayReaderNamedFragmentsTest2Query$data;

compiler/crates/relay-typegen/tests/generate_typescript/fixtures/aliased-inline-fragment-spread.expected

@@ -13,9 +13,9 @@ export type RelayReaderNamedFragmentsTest2Query$data = {
   readonly me: {
     readonly id: string;
     readonly named_fragment: {
-      readonly name: string | null;
-    } | null;
-  } | null;
+      readonly name: string | null | undefined;
+    } | null | undefined;
+  } | null | undefined;
 };
 export type RelayReaderNamedFragmentsTest2Query = {
   response: RelayReaderNamedFragmentsTest2Query$data;

compiler/crates/relay-typegen/tests/generate_typescript/fixtures/custom-scalar-type-import.expected

@@ -13,16 +13,16 @@ query Viewer($params: JSON) {
 ==================================== OUTPUT ===================================
 import { JSON } from "TypeDefsFile";
 export type Viewer$variables = {
-  params?: JSON | null;
+  params?: JSON | null | undefined;
 };
 export type Viewer$data = {
   readonly viewer: {
     readonly actor: {
       readonly profilePicture2?: {
         readonly __typename: "Image";
-      } | null;
-    } | null;
-  } | null;
+      } | null | undefined;
+    } | null | undefined;
+  } | null | undefined;
 };
 export type Viewer = {
   response: Viewer$data;