v3.0.0 (#1755)

.github/workflows/main.yml

@@ -9,10 +9,10 @@ jobs:
     steps:
       - uses: actions/checkout@master
 
-      - name: Use Node.js 14
+      - name: Use Node.js 16
         uses: actions/setup-node@master
         with:
-          node-version: 14
+          node-version: 16
 
       - uses: actions/cache@v2
         name: Cache node_modules
@@ -83,12 +83,13 @@ jobs:
         run: yarn test --ci
 
   angular:
-    name: Test on Angular ${{ matrix.angular_version }}
+    name: Test on Angular ${{ matrix.angular_version }} GraphQL ${{ matrix.graphql_version }}
     needs: build
     runs-on: ubuntu-latest
     strategy:
       matrix:
         angular_version: [12, 13]
+        graphql_version: [15, 16]
     steps:
       - name: Use Node.js 14
         uses: actions/setup-node@master
@@ -114,7 +115,7 @@ jobs:
         run: ng new testapp --package-manager yarn --defaults --minimal --skip-git
 
       - name: ng add apollo-angular
-        run: (cd testapp && ng add ../packages/apollo-angular/apollo-angular.tgz --defaults --verbose --skip-confirmation)
+        run: (cd testapp && ng add ../packages/apollo-angular/apollo-angular.tgz --graphql ${{ matrix.graphql_version }} --defaults --verbose --skip-confirmation)
 
       - name: ng build
         run: (cd testapp && yarn ng run testapp:build:production)
@@ -128,7 +129,7 @@ jobs:
         run: (cd testapp && ng add @cypress/schematic --defaults --verbose --skip-confirmation)
 
       - name: Update Angular code
-        run: ./scripts/prepare-e2e.js testapp
+        run: ./scripts/prepare-e2e.js testapp ${{ matrix.graphql_version }}
 
       - name: ng e2e
         run: (cd testapp && yarn ng run testapp:cypress-run:production)

package.json

@@ -18,41 +18,41 @@
     "packages/*"
   ],
   "devDependencies": {
-    "@angular-devkit/build-angular": "^13.0.2",
-    "@angular-devkit/core": "^13.0.0",
-    "@angular-devkit/schematics": "^13.0.0",
-    "@angular/animations": "^13.0.0",
-    "@angular/common": "^13.0.0",
-    "@angular/compiler": "^13.0.0",
-    "@angular/compiler-cli": "^13.0.0",
-    "@angular/core": "^13.0.0",
-    "@angular/platform-browser": "^13.0.0",
-    "@angular/platform-browser-dynamic": "^13.0.0",
-    "@angular/platform-server": "^13.0.0",
-    "@apollo/client": "3.3.19",
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
-    "@schematics/angular": "^13.0.0",
-    "@types/extract-files": "8.1.0",
+    "@angular-devkit/build-angular": "^13.2.3",
+    "@angular-devkit/core": "^13.2.3",
+    "@angular-devkit/schematics": "^13.2.3",
+    "@angular/animations": "^13.2.2",
+    "@angular/common": "^13.2.2",
+    "@angular/compiler": "^13.2.2",
+    "@angular/compiler-cli": "^13.2.2",
+    "@angular/core": "^13.2.2",
+    "@angular/cli": "^13.2.2",
+    "@angular/platform-browser": "^13.2.2",
+    "@angular/platform-browser-dynamic": "^13.2.2",
+    "@angular/platform-server": "^13.2.2",
+    "@angular/router": "^13.2.2",
+    "@apollo/client": "3.5.9",
+    "@babel/core": "^7.17.4",
+    "@babel/preset-env": "^7.16.11",
+    "@schematics/angular": "^13.2.3",
     "@types/jest": "26.0.23",
     "@types/node": "15.6.0",
-    "@types/semver": "7.3.6",
-    "babel-jest": "^27.3.1",
+    "babel-jest": "^27.5.1",
     "browserlist": "^1.0.1",
     "cpx": "1.5.0",
-    "graphql": "15.5.0",
+    "graphql": "16.3.0",
     "husky": "4.3.8",
-    "jest": "^27.0.0",
-    "jest-preset-angular": "^11.0.0-rc.3",
+    "jest": "^27.5.1",
+    "jest-preset-angular": "^11.1.1",
     "jest-zone-patch": "0.0.10",
     "lint-staged": "11.0.0",
-    "ng-packagr": "^13.0.0",
-    "prettier": "2.3.0",
+    "ng-packagr": "^13.2.1",
+    "prettier": "2.5.1",
     "react": "17.0.2",
     "rimraf": "3.0.2",
-    "rxjs": "^7.4.0",
+    "rxjs": "^7.5.4",
     "shelljs": "0.8.4",
-    "ts-jest": "^27.0.7",
+    "ts-jest": "^27.1.3",
     "tslib": "^2.3.0",
     "typescript": "~4.4.4",
     "zone.js": "~0.11.4"

packages/apollo-angular/CHANGELOG.md

@@ -1,14 +1,29 @@
 # Change log
 
-### vNext
+### v3.0.0
 
 - `useGETForQueries` in Http Link [`5996109`](https://github.com/kamilkisiela/apollo-angular/commit/599610934e5f9cf8cc2d62abc270edddc937cc60)
-- Support `TypedDocumentNode` [`120594a`](https://github.com/kamilkisiela/apollo-angular/commit/120594a3f744e0d233ede3239b08e6721cb35d54)
 - Bring back `ApolloModule` [`0a24c4f`](https://github.com/kamilkisiela/apollo-angular/commit/0a24c4f7af8189a825483c57b2d60cb7a875b18f)
 - Fix `useInitialLoading` [`750429c`](https://github.com/kamilkisiela/apollo-angular/commit/750429cbe0aaad07a3fdc2e2ef046fe8be4aad28)
 - Typed `gql` and `graphql` tags - both accept two generic types and support `TypedDocumentNode` [`9a8ea5f`](https://github.com/kamilkisiela/apollo-angular/commit/9a8ea5f229cf7937d74332092cb3eba40828b7b1)
 - Add `useMutationLoading` flag [`bc223fe`](https://github.com/kamilkisiela/apollo-angular/commit/bc223fe6487edd35c56ad908e4739580ce69f056)
 - Fix type inference for Mutations [#1659](https://github.com/kamilkisiela/apollo-angular/pull/1659)
+- Declare support for Angular 13
+- Remove `extract-files` library from dependencies (you need to pass `extractFiles` function to HttpLink's options)
+
+**Migration from v2 to v3**
+
+1. Use `ApolloModule` in your NgModule to provide `Apollo` service
+2. If you're using old version of `graphql`, update to latest v15 or v16.
+3. In case of file uploads, import `extractFiles` from `extract-files` library and pass it to `HttpLink.create({ ..., extractFiles })`
+4. Done.
+
+### v2.6.0
+
+- Support `TypedDocumentNode` [`120594a`](https://github.com/kamilkisiela/apollo-angular/commit/120594a3f744e0d233ede3239b08e6721cb35d54)
+
+### v2.5.0
+
 - Declare support for Angular 12
 
 ### v2.4.0

packages/apollo-angular/README.md

@@ -34,7 +34,7 @@ That’s it! You may now use Apollo Angular in any of your Angular environments.
 
 For an amazing developer experience you may also install the [Apollo Client Developer tools for Chrome](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm) which will give you inspectability into your Apollo Angular data.
 
-- If you are using Apollo-Client v3, please make sure to use `apollo-angular@v2`
+- If you are using Apollo-Client v3, please make sure to use `apollo-angular@v3`
 > If you are using Apollo-Client v2, please make sure to use `apollo-angular@v1` (and for Angular 10 support, make sure to use `v1.10.0`)
 
 ## Usage

packages/apollo-angular/http/src/http-link.ts

@@ -7,7 +7,6 @@ import {
   FetchResult,
 } from '@apollo/client/core';
 import {print} from 'graphql';
-import {extractFiles} from 'extract-files';
 import {Options, Body, Request, Context, OperationPrinter} from './types';
 import {
   createHeadersWithClientAwereness,
@@ -85,7 +84,11 @@ export class HttpLinkHandler extends ApolloLink {
 
         req.options.headers = mergeHeaders(req.options.headers, headers);
 
-        const sub = fetch(req, this.httpClient, extractFiles).subscribe({
+        const sub = fetch(
+          req,
+          this.httpClient,
+          this.options.extractFiles,
+        ).subscribe({
           next: (response) => {
             operation.setContext({response});
             observer.next(response.body);

packages/apollo-angular/http/src/types.ts

@@ -22,6 +22,7 @@ export type OperationPrinter = (operation: DocumentNode) => string;
 export interface Options extends FetchOptions, HttpRequestOptions {
   operationPrinter?: OperationPrinter;
   useGETForQueries?: boolean;
+  extractFiles?: ExtractFiles;
 }
 
 export type Body = {
@@ -40,9 +41,7 @@ export type Request = {
   options: HttpRequestOptions;
 };
 
-export type ExtractFiles = (
-  body: Body | Body[],
-) => {
+export type ExtractFiles = (body: Body | Body[]) => {
   clone: Body;
   files: Map<any, any>;
 };

packages/apollo-angular/http/src/utils.ts

@@ -6,7 +6,7 @@ import {Request, Body, ExtractFiles} from './types';
 export const fetch = (
   req: Request,
   httpClient: HttpClient,
-  extractFiles: ExtractFiles,
+  extractFiles?: ExtractFiles,
 ): Observable<HttpResponse<Object>> => {
   const shouldUseBody =
     ['POST', 'PUT', 'PATCH'].indexOf(req.method.toUpperCase()) !== -1;
@@ -36,6 +36,16 @@ export const fetch = (
       );
     }
 
+    if (!extractFiles) {
+      return new Observable((observer) =>
+        observer.error(
+          new Error(
+            `To use File upload you need to pass "extractFiles" function from "extract-files" library to HttpLink's options`,
+          ),
+        ),
+      );
+    }
+
     multipartInfo = extractFiles(req.body);
 
     shouldUseMultipart = !!multipartInfo.files.size;

packages/apollo-angular/http/tests/http-link.spec.ts

@@ -572,7 +572,7 @@ describe('HttpLink', () => {
       `,
     };
     const data2 = {
-      boo: true,
+      bar: true,
     };
 
     apollo.create({

packages/apollo-angular/http/tests/ssr.spec.ts

@@ -100,9 +100,8 @@ describe.skip('integration', () => {
         },
       ]);
       const moduleRef = await platform.bootstrapModule(AsyncServerModule);
-      const applicationRef: ApplicationRef = moduleRef.injector.get(
-        ApplicationRef,
-      );
+      const applicationRef: ApplicationRef =
+        moduleRef.injector.get(ApplicationRef);
       await applicationRef.isStable
         .pipe(
           filter((isStable: boolean) => isStable),

packages/apollo-angular/ng-package.js

@@ -5,5 +5,5 @@ module.exports = {
     entryFile: 'src/index.ts',
     flatModuleFile: 'ngApollo'
   },
-  allowedNonPeerDependencies: ['semver', 'extract-files'],
+  allowedNonPeerDependencies: ['extract-files'],
 };

packages/apollo-angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "apollo-angular",
   "description": "Use your GraphQL data in your Angular app, with the Apollo Client",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "author": {
     "name": "Kamil Kisiela",
     "email": "[email protected]",
@@ -38,13 +38,11 @@
   "peerDependencies": {
     "@angular/core": "^12.0.0 || ^13.0.0",
     "@apollo/client": "^3.0.0",
-    "graphql": "^14.0.0 || ^15.0.0",
+    "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "rxjs": "^6.0.0 || ^7.0.0",
     "zone.js": ">=0.10.0 <0.12.0"
   },
   "dependencies": {
-    "semver": "^7.0.0",
-    "extract-files": "^9.0.0",
     "tslib": "^2.0.0"
   },
   "schematics": "./schematics/collection.json",
@@ -58,4 +56,4 @@
       "graphql"
     ]
   }
-}
+}

packages/apollo-angular/schematics/install/index.ts

@@ -21,7 +21,7 @@ import {addModuleImportToRootModule} from '../utils/ast';
 
 export default function install(options: Schema): Rule {
   return chain([
-    addDependencies(),
+    addDependencies(options),
     inludeAsyncIterableLib(),
     allowSyntheticDefaultImports(),
     addSetupFiles(options),
@@ -30,24 +30,27 @@ export default function install(options: Schema): Rule {
   ]);
 }
 
-export const dependenciesMap: Record<string, string> = {
-  'apollo-angular': '^2.4.0',
+export function createDependenciesMap(options: Schema): Record<string, string> {
+  return {
+  'apollo-angular': '^3.0.0',
   '@apollo/client': '^3.0.0',
-  graphql: '^15.0.0',
+  graphql: `^${options.graphql ?? '16.0.0'}`,
 };
+}
 
 /**
  * Add all necessary node packages
  * as dependencies in the package.json
  * and installs them by running `npm install`.
  */
-function addDependencies() {
+function addDependencies(options: Schema) {
   return (host: Tree, context: SchematicContext) => {
     const packageJsonPath = 'package.json';
     const packageJson = getJsonFile(host, packageJsonPath);
 
     packageJson.dependencies = packageJson.dependencies || {};
 
+    const dependenciesMap = createDependenciesMap(options);
     for (const dependency in dependenciesMap) {
       if (dependenciesMap.hasOwnProperty(dependency)) {
         const version = dependenciesMap[dependency];

packages/apollo-angular/schematics/install/schema.json

@@ -9,6 +9,12 @@
         "minLength": 0,
         "default": "",
         "x-prompt": "Url to your GraphQL API"
+      },
+      "graphql": {
+        "type": "string",
+        "minLength": 0,
+        "default": "16",
+        "x-prompt": "Version of GraphQL"
       }
     },
     "required": []

packages/apollo-angular/schematics/install/schema.ts

@@ -3,4 +3,6 @@ export interface Schema {
   project?: string;
   /** Url to your GraphQL endpoint */
   endpoint?: string;
+  /** Version of GraphQL (16 by default) */
+  graphql?: string;
 }

packages/apollo-angular/schematics/migrations/v2.ts

@@ -8,7 +8,7 @@ import {
 import {NodePackageInstallTask} from '@angular-devkit/schematics/tasks';
 import * as ts from 'typescript';
 import {getJsonFile} from '../utils';
-import {dependenciesMap} from '../install/index';
+import {createDependenciesMap} from '../install/index';
 
 export default function (): Rule {
   return chain([migrateImports, migrateTsConfig, migrateDependencies]);
@@ -21,6 +21,8 @@ function migrateDependencies() {
 
     packageJson.dependencies = packageJson.dependencies || {};
 
+    const dependenciesMap = createDependenciesMap({});
+
     for (const dependency in dependenciesMap) {
       if (dependenciesMap.hasOwnProperty(dependency)) {
         const version = dependenciesMap[dependency];

packages/apollo-angular/schematics/tests/migration-v2.spec.ts

@@ -5,7 +5,7 @@ import {getFileContent} from '@schematics/angular/utility/test';
 import {CompilerOptions} from 'typescript';
 
 import {createTestApp, parseJSON} from '../utils';
-import {dependenciesMap} from '../install';
+import {createDependenciesMap} from '../install';
 
 const migrationsPath = resolve(__dirname, '../migrations.json');
 const migrationName = 'migration-2.0.0';
@@ -199,6 +199,8 @@ describe('Migration: Apollo Angular V2', () => {
       tree.readContent('package.json'),
     );
 
+    const dependenciesMap = createDependenciesMap({});
+
     expect(packageJson.dependencies['apollo-angular']).toEqual(
       dependenciesMap['apollo-angular'],
     );

packages/apollo-angular/schematics/tests/ng-add.spec.ts

@@ -5,7 +5,7 @@ import {getFileContent} from '@schematics/angular/utility/test';
 import {CompilerOptions} from 'typescript';
 
 import {createTestApp, parseJSON} from '../utils';
-import {dependenciesMap} from '../install';
+import {createDependenciesMap} from '../install';
 
 const collectionPath = resolve(__dirname, '../collection.json');
 
@@ -31,6 +31,10 @@ describe('ng-add', () => {
     );
     const {dependencies} = packageJson;
 
+    const dependenciesMap = createDependenciesMap({
+      graphql: '16',
+    });
+
     for (const dependency in dependenciesMap) {
       if (dependenciesMap.hasOwnProperty(dependency)) {
         const version = dependenciesMap[dependency];