diff --git a/.changeset/remove-angular-namespace.md b/.changeset/remove-angular-namespace.md new file mode 100644 index 0000000000..46bbbf2c0b --- /dev/null +++ b/.changeset/remove-angular-namespace.md @@ -0,0 +1,5 @@ +--- +@graphql-codegen/typescript-apollo-angular: patch +--- + +Change `apollo-angular` imports to named non-namespace imports diff --git a/packages/plugins/typescript/apollo-angular/src/visitor.ts b/packages/plugins/typescript/apollo-angular/src/visitor.ts index ba266c0a4d..355dff2cf5 100644 --- a/packages/plugins/typescript/apollo-angular/src/visitor.ts +++ b/packages/plugins/typescript/apollo-angular/src/visitor.ts @@ -108,7 +108,7 @@ export class ApolloAngularVisitor extends ClientSideBaseVisitor< } } - const dependencyInjections = ['apollo: Apollo.Apollo'].concat(this.config.additionalDI); + const dependencyInjections = ['apollo: Apollo'].concat(this.config.additionalDI); const dependencyInjectionArgs = dependencyInjections.map(content => { return content.split(':')[0]; }); @@ -129,7 +129,7 @@ export class ApolloAngularVisitor extends ClientSideBaseVisitor< const imports = [ `import { Injectable } from '@angular/core';`, - `import * as Apollo from '${this.config.apolloAngularPackage}';`, + `import { Apollo, Query as ApolloQuery, Mutation as ApolloMutation } from '${this.config.apolloAngularPackage}';`, ]; if (this.config.sdkClass) { @@ -316,7 +316,7 @@ export class ApolloAngularVisitor extends ClientSideBaseVisitor< @Injectable({ providedIn: ${this._providedIn(node)} }) - export class ${serviceName} extends Apollo.${operationType}<${operationResultType}, ${operationVariablesTypes}> { + export class ${serviceName} extends Apollo${operationType}<${operationResultType}, ${operationVariablesTypes}> { ${this.config.addExplicitOverride ? 'override ' : ''}document = ${this._getDocumentNodeVariable( node, documentVariableName, diff --git a/packages/plugins/typescript/apollo-angular/tests/apollo-angular.spec.ts b/packages/plugins/typescript/apollo-angular/tests/apollo-angular.spec.ts index 581e3d7808..1d567c72cf 100644 --- a/packages/plugins/typescript/apollo-angular/tests/apollo-angular.spec.ts +++ b/packages/plugins/typescript/apollo-angular/tests/apollo-angular.spec.ts @@ -84,7 +84,9 @@ describe('Apollo Angular', () => { }, )) as Types.ComplexPluginOutput; - expect(content.prepend).toContain(`import * as Apollo from 'apollo-angular';`); + expect(content.prepend).toContain( + `import { Apollo, Query as ApolloQuery, Mutation as ApolloMutation } from 'apollo-angular';`, + ); expect(content.prepend).toContain(`import { Injectable } from '@angular/core';`); await validateTypeScript(content, schema, docs, {}); }); @@ -101,7 +103,7 @@ describe('Apollo Angular', () => { )) as Types.ComplexPluginOutput; expect(content.content).toBeSimilarStringTo(` - constructor(apollo: Apollo.Apollo) { + constructor(apollo: Apollo) { super(apollo); } } @@ -123,7 +125,7 @@ describe('Apollo Angular', () => { )) as Types.ComplexPluginOutput; expect(content.content).toBeSimilarStringTo(` - constructor(apollo: Apollo.Apollo, testService: TestService, testService1: TestService1) { + constructor(apollo: Apollo, testService: TestService, testService1: TestService1) { super(apollo, testService, testService1); } } @@ -163,7 +165,9 @@ describe('Apollo Angular', () => { }, )) as Types.ComplexPluginOutput; - expect(content.prepend).toContain(`import * as Apollo from 'my-custom-apollo-angular';`); + expect(content.prepend).toContain( + `import { Apollo, Query as ApolloQuery, Mutation as ApolloMutation } from 'my-custom-apollo-angular';`, + ); expect(content.prepend).toContain(`import { Injectable } from '@angular/core';`); await validateTypeScript(content, schema, docs, {}); }); @@ -344,12 +348,16 @@ describe('Apollo Angular', () => { it('Should be able to use root schema object', async () => { const rootSchema = buildSchema(` type RootQuery { f: String } - schema { query: RootQuery } + type RootMutation { g(input: String!): String! } + schema { query: RootQuery, mutation: RootMutation } `); const query = gql` query test { f } + mutation testMutation { + g(input: "foo") + } `; const docs = [{ location: '', document: query }]; const content = (await plugin( @@ -365,7 +373,13 @@ describe('Apollo Angular', () => { @Injectable({ providedIn: 'root' }) - export class TestGQL extends Apollo.Query + export class TestGQL extends ApolloQuery + `); + expect(content.content).toBeSimilarStringTo(` + @Injectable({ + providedIn: 'root' + }) + export class TestMutationGQL extends ApolloMutation `); await validateTypeScript(content, rootSchema, docs, {}); }); @@ -756,10 +770,10 @@ describe('Apollo Angular', () => { expect(content.content).toBeSimilarStringTo(`@Injectable({ providedIn: 'root' }) - export class TestGQL extends Apollo.Query { + export class TestGQL extends ApolloQuery { document = Operations.TestDocument; - constructor(apollo: Apollo.Apollo) { + constructor(apollo: Apollo) { super(apollo); } }`);