Generate optional TypeScript fields when @include directive is used

apollographql · Mar 29, 2020 · 24be1a4 · 24be1a4
1 parent 04bf842
commit 24be1a4
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,7 +18,7 @@
 - `apollo-codegen-swift`
   - <First `apollo-codegen-swift` related entry goes here>
 - `apollo-codegen-typescript`
-  - <First `apollo-codegen-typescript` related entry goes here>
+  - Generate optional TypeScript fields when @include directive is used [#1854](https://github.com/apollographql/apollo-tooling/pull/1854)
 - `apollo-env`
   - <First `apollo-env` related entry goes here>
 - `apollo-graphql`

diff --git a/packages/apollo-codegen-typescript/src/__tests__/__snapshots__/codeGeneration.ts.snap b/packages/apollo-codegen-typescript/src/__tests__/__snapshots__/codeGeneration.ts.snap
@@ -1,5 +1,48 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Typescript codeGeneration @include directive 1`] = `
+Object {
+  "common": "/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+//==============================================================
+// START Enums and Input Objects
+//==============================================================
+
+//==============================================================
+// END Enums and Input Objects
+//==============================================================
+",
+  "generatedFiles": Array [
+    Object {
+      "content": TypescriptGeneratedFile {
+        "fileContents": "/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL fragment: SimpleFragment
+// ====================================================
+
+export interface SimpleFragment {
+  __typename: \\"Human\\" | \\"Droid\\";
+  /**
+   * The name of the character
+   */
+  name?: string;
+}
+",
+      },
+      "fileName": "SimpleFragment.ts",
+      "sourcePath": "GraphQL request",
+    },
+  ],
+}
+`;
+
 exports[`Typescript codeGeneration fragment spreads with inline fragments 1`] = `
 Object {
   "common": "/* tslint:disable */

diff --git a/packages/apollo-codegen-typescript/src/__tests__/codeGeneration.ts b/packages/apollo-codegen-typescript/src/__tests__/codeGeneration.ts
@@ -286,6 +286,17 @@ describe("Typescript codeGeneration", () => {
     const output = generateSource(context);
     expect(output).toMatchSnapshot();
   });
+
+  test("@include directive", () => {
+    const context = compile(`
+      fragment SimpleFragment on Character{
+        name @include(if: $includeName)
+      }
+    `);
+
+    const output = generateSource(context);
+    expect(output).toMatchSnapshot();
+  });
 });
 
 describe("Typescript codeGeneration local / global", () => {

diff --git a/packages/apollo-codegen-typescript/src/codeGeneration.ts b/packages/apollo-codegen-typescript/src/codeGeneration.ts
@@ -285,7 +285,8 @@ export class TypescriptAPIGenerator extends TypescriptGenerator {
             interfaceName,
             variables.map(variable => ({
               name: variable.name,
-              type: this.typeFromGraphQLType(variable.type)
+              type: this.typeFromGraphQLType(variable.type),
+              isConditional: false
             })),
             { keyInheritsNullability: true }
           )
@@ -559,7 +560,8 @@ export class TypescriptAPIGenerator extends TypescriptGenerator {
     return {
       name: field.alias ? field.alias : field.name,
       description: field.description,
-      type
+      type,
+      isConditional: field.isConditional || false
     };
   }
 
@@ -573,14 +575,16 @@ export class TypescriptAPIGenerator extends TypescriptGenerator {
       res = {
         name: field.alias ? field.alias : field.name,
         description: field.description,
-        type: t.TSUnionType(types)
+        type: t.TSUnionType(types),
+        isConditional: field.isConditional || false
       };
     } else {
       // TODO: Double check that this works
       res = {
         name: field.alias ? field.alias : field.name,
         description: field.description,
-        type: this.typeFromGraphQLType(field.type)
+        type: this.typeFromGraphQLType(field.type),
+        isConditional: field.isConditional || false
       };
     }
 

diff --git a/packages/apollo-codegen-typescript/src/language.ts b/packages/apollo-codegen-typescript/src/language.ts
@@ -14,6 +14,7 @@ export type ObjectProperty = {
   name: string;
   description?: string | null | undefined;
   type: t.TSType;
+  isConditional: boolean;
 };
 
 export default class TypescriptGenerator {
@@ -61,7 +62,8 @@ export default class TypescriptGenerator {
       const field = fieldMap[fieldName];
       return {
         name: fieldName,
-        type: this.typeFromGraphQLType(field.type)
+        type: this.typeFromGraphQLType(field.type),
+        isConditional: false
       };
     });
 
@@ -92,15 +94,15 @@ export default class TypescriptGenerator {
       keyInheritsNullability?: boolean;
     } = {}
   ) {
-    return fields.map(({ name, description, type }) => {
+    return fields.map(({ name, description, type, isConditional }) => {
       const propertySignatureType = t.TSPropertySignature(
         t.identifier(name),
         t.TSTypeAnnotation(type)
       );
 
       // TODO: Check if this works
       propertySignatureType.optional =
-        keyInheritsNullability && this.isNullableType(type);
+        (keyInheritsNullability && this.isNullableType(type)) || isConditional;
 
       if (this.options.useReadOnlyTypes) {
         propertySignatureType.readonly = true;