fix(graphql-types-generator): add wrapper for sub response in angular (#209)

* fix(graphql-types-generator): add wrapperr for sub response in angular

* fix: change the sub type name

Author: AaronZyLee

packages/graphql-types-generator/src/angular/index.ts

@@ -14,6 +14,7 @@ import {
 import { typeNameFromGraphQLType } from '../typescript/types';
 import { Property, interfaceDeclaration } from '../typescript/language';
 import { isList } from '../utilities/graphql';
+import { propertyDeclarations } from '../flow/codeGeneration';
 
 export function generateSource(context: LegacyCompilerContext) {
   const generator = new CodeGenerator<LegacyCompilerContext>(context);
@@ -39,11 +40,8 @@ function generateTypes(generator: CodeGenerator, context: LegacyCompilerContext)
   // if subscription operations exist create subscriptionResponse interface
   // https://github.com/aws-amplify/amplify-cli/issues/5284
   if (context.schema.getSubscriptionType()) {
-    generator.printOnNewline(`
-    export interface SubscriptionResponse<T> {
-      value: GraphQLResult<T>;
-    }`);
-    generator.printNewline();
+    generateSubscriptionResponseWrapper(generator);
+    generateSubscriptionOperationTypes(generator, context);
   }
   context.typesUsed.forEach(type => typeDeclarationForGraphQLType(generator, type));
 
@@ -54,6 +52,38 @@ function generateTypes(generator: CodeGenerator, context: LegacyCompilerContext)
   Object.values(context.fragments).forEach(operation => interfaceDeclarationForFragment(generator, operation));
 }
 
+function generateSubscriptionResponseWrapper(generator: CodeGenerator) {
+  generator.printOnNewline(`
+  export interface SubscriptionResponse<T> {
+    value: GraphQLResult<T>;
+  }`);
+  generator.printNewline();
+}
+function generateSubscriptionOperationTypes(generator: CodeGenerator, context: LegacyCompilerContext) {
+  const typeName = '__SubscriptionContainer';
+  const properties: Property[] = [];
+  Object.values(context.operations)
+    .filter(operation => operation.operationType === 'subscription')
+    .forEach(operation => {
+      const { operationName, operationType } = operation;
+      const typeName = interfaceNameFromOperation({ operationName, operationType });
+      if (operation.fields.length) {
+        properties.push({
+          fieldName: operation.fields[0].responseName,
+          typeName,
+        });
+      }
+    });
+  if (properties.length) {
+    generator.printOnNewline(`export type ${typeName} = `);
+    generator.pushScope({ typeName });
+    generator.withinBlock(() => propertyDeclarations(generator, properties), '{', '}');
+    generator.popScope();
+    generator.print(';');
+    generator.printNewline();
+  }
+}
+
 function interfaceDeclarationForOperation(generator: CodeGenerator, { operationName, operationType, fields }: LegacyOperation) {
   const interfaceName = interfaceNameFromOperation({ operationName, operationType });
   fields = fields.map(field => updateTypeNameField(field));
@@ -102,6 +132,9 @@ function getReturnTypeName(generator: CodeGenerator, op: LegacyOperation): Strin
     return typeNameFromGraphQLType(generator.context, type);
   } else {
     let returnType = interfaceNameFromOperation({ operationName, operationType });
+    if (op.operationType === 'subscription' && op.fields.length) {
+      returnType = `Pick<__SubscriptionContainer, "${op.fields[0].responseName}">`;
+    }
     if (isList(type)) {
       returnType = `Array<${returnType}>`;
     }
@@ -150,7 +183,9 @@ function generateSubscriptionOperation(generator: CodeGenerator, op: LegacyOpera
       const params = ['statement'];
       variableAssignmentToInput(generator, vars);
       params.push('gqlAPIServiceArguments');
-      generator.printOnNewline(`return API.graphql(graphqlOperation(${params.join(', ')})) as Observable<SubscriptionResponse<${returnType}>>;`);
+      generator.printOnNewline(
+        `return API.graphql(graphqlOperation(${params.join(', ')})) as Observable<SubscriptionResponse<${returnType}>>;`,
+      );
       generator.printOnNewline('}');
     });
   }

packages/graphql-types-generator/test/angular/__snapshots__/index.js.snap

@@ -1114,6 +1114,10 @@ export interface SubscriptionResponse<T> {
   value: GraphQLResult<T>;
 }
 
+export type __SubscriptionContainer = {
+  onCreateRestaurant: OnCreateRestaurantSubscription;
+};
+
 export type Restaurant = {
   __typename: \\"Restaurant\\";
   id: string;
@@ -1135,7 +1139,7 @@ export type OnCreateRestaurantSubscription = {
 })
 export class APIService {
   OnCreateRestaurantListener: Observable<
-    SubscriptionResponse<OnCreateRestaurantSubscription>
+    SubscriptionResponse<Pick<__SubscriptionContainer, \\"onCreateRestaurant\\">>
   > = API.graphql(
     graphqlOperation(
       \`subscription OnCreateRestaurant {
@@ -1148,7 +1152,9 @@ export class APIService {
         }
       }\`
     )
-  ) as Observable<SubscriptionResponse<OnCreateRestaurantSubscription>>;
+  ) as Observable<
+    SubscriptionResponse<Pick<__SubscriptionContainer, \\"onCreateRestaurant\\">>
+  >;
 }
 "
 `;
@@ -1165,6 +1171,10 @@ export interface SubscriptionResponse<T> {
   value: GraphQLResult<T>;
 }
 
+export type __SubscriptionContainer = {
+  onCreateRestaurant: OnCreateRestaurantSubscription;
+};
+
 export type Restaurant = {
   __typename: \\"Restaurant\\";
   id: string;
@@ -1193,7 +1203,9 @@ export type OnCreateRestaurantSubscription = {
 export class APIService {
   OnCreateRestaurantListener(
     owner: string
-  ): Observable<SubscriptionResponse<OnCreateRestaurantSubscription>> {
+  ): Observable<
+    SubscriptionResponse<Pick<__SubscriptionContainer, \\"onCreateRestaurant\\">>
+  > {
     const statement = \`subscription OnCreateRestaurant($owner: String!) {
         onCreateRestaurant(owner: $owner) {
           __typename
@@ -1211,7 +1223,9 @@ export class APIService {
     };
     return API.graphql(
       graphqlOperation(statement, gqlAPIServiceArguments)
-    ) as Observable<SubscriptionResponse<OnCreateRestaurantSubscription>>;
+    ) as Observable<
+      SubscriptionResponse<Pick<__SubscriptionContainer, \\"onCreateRestaurant\\">>
+    >;
   }
 }
 "