Support Apollo Angular 2.0 and add serviceProvidedIn option (dotansimha#4507)

* Support Apollo Angular 2.0

* Change defaults

* Update test

* Add serviceProvidedInRoot option to Apollo Angular plugin

* fix canary publish script

Co-authored-by: Dotan Simha <[email protected]>

Author: kamilkisiela

.changeset/funny-books-sing.md

@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/typescript-apollo-angular': major
+---
+
+Support Apollo Angular 2.0 by default

.changeset/tall-knives-collect.md

@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/typescript-apollo-angular': minor
+---
+
+Allow to define the Injector of the generated SDK class in Apollo Angular plugin

dev-test/githunt/types.apolloAngular.sdk.ts

@@ -1,7 +1,7 @@
 import gql from 'graphql-tag';
 import { Injectable } from '@angular/core';
 import * as Apollo from 'apollo-angular';
-import * as ApolloCore from 'apollo-client';
+import * as ApolloCore from '@apollo/client/core';
 export type Maybe<T> = T | null;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
 /** All built-in and custom scalars, mapped to their actual values */

packages/plugins/typescript/apollo-angular/src/config.ts

@@ -10,6 +10,17 @@ import { RawClientSideBasePluginConfig } from '@graphql-codegen/visitor-plugin-c
  * To shed some more light regards this template, it's recommended to go through the this article: http://apollographql.com/docs/angular/basics/services.html , and to read the Code Generation with Apollo Angular: https://the-guild.dev/blog/apollo-angular-12
  */
 export interface ApolloAngularRawPluginConfig extends RawClientSideBasePluginConfig {
+  /**
+   * @description Version of `apollo-angular` package
+   * @default 2
+   *
+   * @exampleMarkdown
+   * ```yml
+   * config:
+   *   apolloAngularVersion: 1
+   * ```
+   */
+  apolloAngularVersion?: number;
   /**
    * @description Allows to define `ngModule` as part of the plugin's config so it's globally available.
    *
@@ -50,6 +61,16 @@ export interface ApolloAngularRawPluginConfig extends RawClientSideBasePluginCon
    * ```
    */
   serviceProvidedInRoot?: boolean;
+  /**
+   * @description Define the Injector of the SDK class.
+   *
+   * @exampleMarkdown
+   * ```yml
+   * config:
+   *   serviceProvidedIn: ./path/to/module#MyModule
+   * ```
+   */
+  serviceProvidedIn?: string;
   /**
    * @description Set to `true` in order to generate a SDK service class that uses all generated services.
    * @default false

packages/plugins/typescript/apollo-angular/src/visitor.ts

@@ -19,10 +19,12 @@ function R_DEF(directive: string) {
 }
 
 export interface ApolloAngularPluginConfig extends ClientSideBasePluginConfig {
+  apolloAngularVersion: number;
   ngModule?: string;
   namedClient?: string;
   serviceName?: string;
   serviceProvidedInRoot?: boolean;
+  serviceProvidedIn?: string;
   sdkClass?: boolean;
   querySuffix?: string;
   mutationSuffix?: string;
@@ -59,11 +61,13 @@ export class ApolloAngularVisitor extends ClientSideBaseVisitor<
         ngModule: rawConfig.ngModule,
         namedClient: rawConfig.namedClient,
         serviceName: rawConfig.serviceName,
+        serviceProvidedIn: rawConfig.serviceProvidedIn,
         serviceProvidedInRoot: rawConfig.serviceProvidedInRoot,
         querySuffix: rawConfig.querySuffix,
         mutationSuffix: rawConfig.mutationSuffix,
         subscriptionSuffix: rawConfig.subscriptionSuffix,
         apolloAngularPackage: rawConfig.apolloAngularPackage || 'apollo-angular',
+        apolloAngularVersion: rawConfig.apolloAngularVersion || 2,
       },
       documents
     );
@@ -85,7 +89,8 @@ export class ApolloAngularVisitor extends ClientSideBaseVisitor<
     ];
 
     if (this.config.sdkClass) {
-      imports.push(`import * as ApolloCore from 'apollo-client';`);
+      const corePackage = this.config.apolloAngularVersion > 1 ? '@apollo/client/core' : 'apollo-client';
+      imports.push(`import * as ApolloCore from '${corePackage}';`);
     }
 
     const defs: Record<string, { path: string; module: string }> = {};
@@ -105,6 +110,15 @@ export class ApolloAngularVisitor extends ClientSideBaseVisitor<
         };
       });
 
+    if (this.config.serviceProvidedIn) {
+      const ngModule = this._parseNgModule(this.config.serviceProvidedIn);
+
+      defs[ngModule.link] = {
+        path: ngModule.path,
+        module: ngModule.module,
+      };
+    }
+
     Object.keys(defs).forEach(key => {
       const def = defs[key];
       // Every Angular Module that I've seen in my entire life use named exports
@@ -283,7 +297,7 @@ ${camelCase(o.node.name.value)}(variables${optionalVariables ? '?' : ''}: ${
   return this.${camelCase(o.serviceName)}.${actionType(o.operationType)}(variables, options)
 }`;
 
-        let watchMethod;
+        let watchMethod: string;
 
         if (o.operationType === 'Query') {
           watchMethod = `
@@ -306,7 +320,11 @@ ${camelCase(o.node.name.value)}Watch(variables${optionalVariables ? '?' : ''}: $
       .join(',\n');
 
     const serviceName = this.config.serviceName || 'ApolloAngularSDK';
-    const providedIn = this.config.serviceProvidedInRoot === false ? '' : `{ providedIn: 'root' }`;
+    const providedIn = this.config.serviceProvidedIn
+      ? `{ providedIn: ${this._parseNgModule(this.config.serviceProvidedIn).module} }`
+      : this.config.serviceProvidedInRoot === false
+      ? ''
+      : `{ providedIn: 'root' }`;
 
     return `
   type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

packages/plugins/typescript/apollo-angular/tests/apollo-angular.spec.ts

@@ -384,7 +384,7 @@ describe('Apollo Angular', () => {
       )) as Types.ComplexPluginOutput;
 
       // NgModule
-      expect(content.prepend).toContain(`import * as ApolloCore from 'apollo-client';`);
+      expect(content.prepend).toContain(`import * as ApolloCore from '@apollo/client/core';`);
       expect(content.content).toBeSimilarStringTo(`
         @Injectable({ providedIn: 'root' })
         export class ApolloAngularSDK {
@@ -427,7 +427,7 @@ describe('Apollo Angular', () => {
       )) as Types.ComplexPluginOutput;
 
       // NgModule
-      expect(content.prepend).toContain(`import * as ApolloCore from 'apollo-client';`);
+      expect(content.prepend).toContain(`import * as ApolloCore from '@apollo/client/core';`);
       // console.log('content.content', content.content);
       expect(content.content).toBeSimilarStringTo(`
         @Injectable()
@@ -447,6 +447,62 @@ describe('Apollo Angular', () => {
       `);
       await validateTypeScript(content, modifiedSchema, docs, {});
     });
+
+    it('should generate a SDK service for Apollo Angular 1.0 on demand', async () => {
+      const modifiedSchema = extendSchema(schema, addToSchema);
+      const myFeed = gql(`
+        query MyFeed {
+          feed {
+            id
+          }
+        }
+      `);
+      const docs = [{ location: '', document: myFeed }];
+      const content = (await plugin(
+        modifiedSchema,
+        docs,
+        {
+          sdkClass: true,
+          apolloAngularVersion: 1,
+        },
+        {
+          outputFile: 'graphql.ts',
+        }
+      )) as Types.ComplexPluginOutput;
+
+      expect(content.prepend).toContain(`import * as ApolloCore from 'apollo-client';`);
+    });
+
+    it('should generate a SDK service with a requested providedIn value', async () => {
+      const modifiedSchema = extendSchema(schema, addToSchema);
+      const myFeed = gql(`
+        query MyFeed {
+          feed {
+            id
+          }
+        }
+      `);
+      const docs = [{ location: '', document: myFeed }];
+      const content = (await plugin(
+        modifiedSchema,
+        docs,
+        {
+          sdkClass: true,
+          serviceProvidedIn: '../app.module#AppModule',
+        },
+        {
+          outputFile: 'graphql.ts',
+        }
+      )) as Types.ComplexPluginOutput;
+
+      // NgModule import
+      expect(content.prepend).toContain(`import { AppModule } from '../app.module';`);
+      // NgModule in `providedIn`
+      expect(content.content).toBeSimilarStringTo(`
+        @Injectable({ providedIn: AppModule })
+        export class ApolloAngularSDK {
+      `);
+    });
   });
 
   describe('others', () => {

scripts/canary-release.js

@@ -45,16 +45,16 @@ async function updateVersions() {
         }
       }
 
-      // await applyReleasePlan(
-      //   releasePlan,
-      //   packages,
-      //   {
-      //     ...config,
-      //     commit: false,
-      //   },
-      //   false,
-      //   true
-      // );
+      await applyReleasePlan(
+        releasePlan,
+        packages,
+        {
+          ...config,
+          commit: false,
+        },
+        false,
+        true
+      );
     }
   }
 }