diff --git a/.changeset/sweet-pigs-fix.md b/.changeset/sweet-pigs-fix.md new file mode 100644 index 000000000..406ca9d50 --- /dev/null +++ b/.changeset/sweet-pigs-fix.md @@ -0,0 +1,8 @@ +--- +'apollo-angular': major +--- + +Drop deprecated things: + +- Instead of `ApolloModule`, use either `provideApollo()` or `provideNamedApollo()`. +- Instead of `import {graphql} from 'apollo-angular';` use `import {gql as graphql} from 'apollo-angular';` diff --git a/packages/apollo-angular/schematics/install/files/module/graphql.module.ts b/packages/apollo-angular/schematics/install/files/module/graphql.module.ts index 2ef4d4fcd..f1eea19fd 100644 --- a/packages/apollo-angular/schematics/install/files/module/graphql.module.ts +++ b/packages/apollo-angular/schematics/install/files/module/graphql.module.ts @@ -1,10 +1,12 @@ -import { APOLLO_OPTIONS, ApolloModule } from 'apollo-angular'; +import { provideApollo } from 'apollo-angular'; import { HttpLink } from 'apollo-angular/http'; -import { NgModule } from '@angular/core'; +import { inject, NgModule } from '@angular/core'; import { ApolloClientOptions, InMemoryCache } from '@apollo/client/core'; -const uri = '<%= endpoint %>'; // <-- add the URL of the GraphQL server here -export function createApollo(httpLink: HttpLink): ApolloClientOptions { +export function createApollo(): ApolloClientOptions { + const uri = '<%= endpoint %>'; // <-- add the URL of the GraphQL server here + const httpLink = inject(HttpLink); + return { link: httpLink.create({ uri }), cache: new InMemoryCache(), @@ -12,13 +14,6 @@ export function createApollo(httpLink: HttpLink): ApolloClientOptions { } @NgModule({ - exports: [ApolloModule], - providers: [ - { - provide: APOLLO_OPTIONS, - useFactory: createApollo, - deps: [HttpLink], - }, - ], + providers: [provideApollo(createApollo)], }) export class GraphQLModule {} diff --git a/packages/apollo-angular/src/apollo-module.ts b/packages/apollo-angular/src/apollo-module.ts index 7a59bbc5f..889c48ccc 100644 --- a/packages/apollo-angular/src/apollo-module.ts +++ b/packages/apollo-angular/src/apollo-module.ts @@ -1,22 +1,9 @@ -import { NgModule, Provider } from '@angular/core'; +import { Provider } from '@angular/core'; import { ApolloClientOptions } from '@apollo/client/core'; import { Apollo } from './apollo'; import { APOLLO_FLAGS, APOLLO_NAMED_OPTIONS, APOLLO_OPTIONS } from './tokens'; import { Flags, NamedOptions } from './types'; -/** - * This is deprecated and will be removed in the next major version, because - * Angular is moving toward a moduleless ecosystem. - * - * Instead, use either `provideApollo()` or `provideNamedApollo()`. - * - * @deprecated - */ -@NgModule({ - providers: [Apollo], -}) -export class ApolloModule {} - export function provideApollo( optionsFactory: () => ApolloClientOptions, flags: Flags = {}, diff --git a/packages/apollo-angular/src/gql.ts b/packages/apollo-angular/src/gql.ts index 0f9570150..e58ff8d95 100644 --- a/packages/apollo-angular/src/gql.ts +++ b/packages/apollo-angular/src/gql.ts @@ -6,8 +6,3 @@ const typedGQLTag: ( ) => TypedDocumentNode = gqlTag; export const gql = typedGQLTag; - -/** - * @deprecated Instead, use `import {gql as graphql} from 'apollo-angular';`. Because different exports for the same thing will increase the final bundle size. - */ -export const graphql = typedGQLTag; diff --git a/packages/apollo-angular/src/index.ts b/packages/apollo-angular/src/index.ts index 94316a7c2..0b4484e53 100644 --- a/packages/apollo-angular/src/index.ts +++ b/packages/apollo-angular/src/index.ts @@ -1,5 +1,5 @@ export type { TypedDocumentNode } from '@apollo/client/core'; -export { ApolloModule, provideApollo, provideNamedApollo } from './apollo-module'; +export { provideApollo, provideNamedApollo } from './apollo-module'; export { Apollo, ApolloBase } from './apollo'; export { QueryRef, QueryRefFromDocument } from './query-ref'; export { Query } from './query'; @@ -19,4 +19,4 @@ export type { WatchQueryOptions, WatchQueryOptionsAlone, } from './types'; -export { gql, graphql } from './gql'; +export { gql } from './gql'; diff --git a/packages/apollo-angular/testing/src/module.ts b/packages/apollo-angular/testing/src/module.ts index 1543ff98b..f5b3a3b53 100644 --- a/packages/apollo-angular/testing/src/module.ts +++ b/packages/apollo-angular/testing/src/module.ts @@ -1,4 +1,4 @@ -import { Apollo, ApolloModule } from 'apollo-angular'; +import { Apollo } from 'apollo-angular'; import { Inject, InjectionToken, NgModule, Optional } from '@angular/core'; import { ApolloCache, @@ -31,8 +31,8 @@ function addClient(name: string, op: LinkOperation): Operation { } @NgModule({ - imports: [ApolloModule], providers: [ + Apollo, ApolloTestingBackend, { provide: ApolloTestingController, useExisting: ApolloTestingBackend }, ], diff --git a/packages/apollo-angular/tests/index.spec.ts b/packages/apollo-angular/tests/index.spec.ts index 6d4b56404..6cde398fe 100644 --- a/packages/apollo-angular/tests/index.spec.ts +++ b/packages/apollo-angular/tests/index.spec.ts @@ -1,7 +1,7 @@ import * as api from '../src'; import { Apollo } from '../src/apollo'; -import { ApolloModule, provideApollo, provideNamedApollo } from '../src/apollo-module'; -import { gql, graphql } from '../src/gql'; +import { provideApollo, provideNamedApollo } from '../src/apollo-module'; +import { gql } from '../src/gql'; import { QueryRef } from '../src/query-ref'; describe('public api', () => { @@ -11,9 +11,6 @@ describe('public api', () => { test('should export QueryRef', () => { expect(api.QueryRef).toBe(QueryRef); }); - test('should export ApolloModule', () => { - expect(api.ApolloModule).toBe(ApolloModule); - }); test('should export provideApollo', () => { expect(api.provideApollo).toBe(provideApollo); }); @@ -23,7 +20,4 @@ describe('public api', () => { test('should export gql', () => { expect(api.gql).toBe(gql); }); - test('should export graphql', () => { - expect(api.graphql).toBe(graphql); - }); }); diff --git a/scripts/prepare-e2e.js b/scripts/prepare-e2e.js index 4902b569d..f3ee2c9ff 100755 --- a/scripts/prepare-e2e.js +++ b/scripts/prepare-e2e.js @@ -9,12 +9,11 @@ const [, , name, version] = process.argv; function updateComponent() { let filepath = path.join(cwd, `./${name}/src/app/app.component.ts`); const code = - `import { Apollo, ApolloModule } from 'apollo-angular';\n` + + `import { Apollo } from 'apollo-angular';\n` + `import { versionInfo } from 'graphql';\n` + fs .readFileSync(filepath, 'utf8') - .replace('AppComponent {', 'AppComponent { constructor(private readonly apollo: Apollo) {}') - .replace('imports: [', 'imports: [ApolloModule, ') + + .replace('AppComponent {', 'AppComponent { constructor(private readonly apollo: Apollo) {}') + `\n (window as any).GRAPHQL_VERSION = versionInfo.major;`; fs.writeFileSync(filepath, code, 'utf8');