Relax type to be able to use extract-files properly

.changeset/nine-knives-lie.md

@@ -0,0 +1,5 @@
+---
+'apollo-angular': patch
+---
+
+Relax type to be able to use `extract-files` properly

.prettierignore

@@ -1,6 +1,10 @@
 /.changeset/
 /.devcontainer/
 /packages/apollo-angular/CHANGELOG.md
+/packages/apollo-angular/dist/
+/packages/demo/.angular/
+/packages/demo/dist/
+/scripts/
 
 # Needed because TextEncoder workaround must happen before importing @angular-devkit/schematics
 /packages/apollo-angular/schematics/tests/ng-add.spec.ts

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

@@ -41,11 +41,13 @@ export type Request = {
   options: HttpRequestOptions;
 };
 
-export type ExtractFiles = (body: Body | Body[]) => {
-  clone: Body;
+export type ExtractedFiles = {
+  clone: unknown;
   files: Map<any, any>;
 };
 
+export type ExtractFiles = (body: Body | Body[]) => ExtractedFiles;
+
 export type BatchOptions = {
   batchMax?: number;
   batchInterval?: number;

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

@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
 import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
-import { Body, ExtractFiles, Request } from './types';
+import { Body, ExtractedFiles, ExtractFiles, Request } from './types';
 
 export const fetch = (
   req: Request,
@@ -12,10 +12,7 @@ export const fetch = (
     ['variables', 'extensions'].indexOf(param.toLowerCase()) !== -1;
   const isBatching = (req.body as Body[]).length;
   let shouldUseMultipart = req.options && req.options.useMultipart;
-  let multipartInfo: {
-    clone: Body;
-    files: Map<any, any>;
-  };
+  let multipartInfo: ExtractedFiles;
 
   if (shouldUseMultipart) {
     if (isBatching) {

packages/demo/src/app/pages/author/author-page.component.ts

@@ -25,7 +25,7 @@ interface Query {
   `,
 })
 export class AuthorPageComponent implements OnInit {
-  posts: Observable<Post[]>;
+  posts!: Observable<Post[]>;
   constructor(
     private readonly apollo: Apollo,
     private readonly route: ActivatedRoute,
@@ -48,7 +48,7 @@ export class AuthorPageComponent implements OnInit {
           }
         `,
         variables: {
-          authorId: parseInt(this.route.snapshot.paramMap.get('id'), 10),
+          authorId: parseInt(this.route.snapshot.paramMap.get('id') as string, 10),
         },
       })
       .valueChanges.pipe(map(result => result.data.postsOf));

packages/demo/src/app/pages/posts/posts-page.component.ts

@@ -34,7 +34,7 @@ interface Query {
   `,
 })
 export class PostsPageComponent implements OnInit {
-  posts: Observable<Post[]>;
+  posts!: Observable<Post[]>;
   constructor(private readonly apollo: Apollo) {}
 
   ngOnInit() {

packages/demo/src/app/pages/posts/upvoter.component.ts

@@ -6,7 +6,7 @@ import { Component, Input } from '@angular/core';
   template: ` <button (click)="upvote()">Upvote</button> `,
 })
 export class UpvoterComponent {
-  @Input() postId: number;
+  @Input() postId!: number;
 
   constructor(private readonly apollo: Apollo) {}
 

packages/demo/tsconfig.json

@@ -4,7 +4,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
-    "strict": false,
+    "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,

website/src/pages/docs/data/network.mdx

@@ -158,6 +158,7 @@ You also have to define `extractFiles` function:
 
 ```ts
 import extractFiles from 'extract-files/extractFiles.mjs';
+import isExtractableFile from 'extract-files/isExtractableFile.mjs';
 
 // the import depends on the version of `extract-files`
 
@@ -170,7 +171,7 @@ import extractFiles from 'extract-files/extractFiles.mjs';
         return {
           link: httpLink.create({
             uri: '/graphql',
-            extractFiles, // <-
+            extractFiles: body => extractFiles(body, isExtractableFile), // <-
           }),
           cache: new InMemoryCache(),
         };