From ba89bbeb2fd46c48bdfc54c90b7aa17983b10cb8 Mon Sep 17 00:00:00 2001 From: Adrien Crivelli Date: Wed, 18 Sep 2024 18:15:43 +0200 Subject: [PATCH 1/5] Demo is strict mode --- packages/demo/src/app/pages/author/author-page.component.ts | 4 ++-- packages/demo/src/app/pages/posts/posts-page.component.ts | 2 +- packages/demo/src/app/pages/posts/upvoter.component.ts | 2 +- packages/demo/tsconfig.json | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/demo/src/app/pages/author/author-page.component.ts b/packages/demo/src/app/pages/author/author-page.component.ts index a77cff5b2..5638a2614 100644 --- a/packages/demo/src/app/pages/author/author-page.component.ts +++ b/packages/demo/src/app/pages/author/author-page.component.ts @@ -25,7 +25,7 @@ interface Query { `, }) export class AuthorPageComponent implements OnInit { - posts: Observable; + posts!: Observable; 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)); diff --git a/packages/demo/src/app/pages/posts/posts-page.component.ts b/packages/demo/src/app/pages/posts/posts-page.component.ts index 044ccabc8..4ff0956c1 100644 --- a/packages/demo/src/app/pages/posts/posts-page.component.ts +++ b/packages/demo/src/app/pages/posts/posts-page.component.ts @@ -34,7 +34,7 @@ interface Query { `, }) export class PostsPageComponent implements OnInit { - posts: Observable; + posts!: Observable; constructor(private readonly apollo: Apollo) {} ngOnInit() { diff --git a/packages/demo/src/app/pages/posts/upvoter.component.ts b/packages/demo/src/app/pages/posts/upvoter.component.ts index 35b27520c..3e049bf61 100644 --- a/packages/demo/src/app/pages/posts/upvoter.component.ts +++ b/packages/demo/src/app/pages/posts/upvoter.component.ts @@ -6,7 +6,7 @@ import { Component, Input } from '@angular/core'; template: ` `, }) export class UpvoterComponent { - @Input() postId: number; + @Input() postId!: number; constructor(private readonly apollo: Apollo) {} diff --git a/packages/demo/tsconfig.json b/packages/demo/tsconfig.json index 2fd20cb8e..7f187113f 100644 --- a/packages/demo/tsconfig.json +++ b/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, From c91ab6173be8afb70d21eebf83cd6975abad9a06 Mon Sep 17 00:00:00 2001 From: Adrien Crivelli Date: Wed, 18 Sep 2024 18:19:05 +0200 Subject: [PATCH 2/5] Relax type to be able to use `extract-files` properly Fixes #2291 --- .changeset/nine-knives-lie.md | 5 +++++ packages/apollo-angular/http/src/types.ts | 6 ++++-- packages/apollo-angular/http/src/utils.ts | 7 ++----- 3 files changed, 11 insertions(+), 7 deletions(-) create mode 100644 .changeset/nine-knives-lie.md diff --git a/.changeset/nine-knives-lie.md b/.changeset/nine-knives-lie.md new file mode 100644 index 000000000..45a6c74f7 --- /dev/null +++ b/.changeset/nine-knives-lie.md @@ -0,0 +1,5 @@ +--- +'apollo-angular': patch +--- + +Relax type to be able to use `extract-files` properly diff --git a/packages/apollo-angular/http/src/types.ts b/packages/apollo-angular/http/src/types.ts index 3d4ca4b8b..58ddf3612 100644 --- a/packages/apollo-angular/http/src/types.ts +++ b/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; }; +export type ExtractFiles = (body: Body | Body[]) => ExtractedFiles; + export type BatchOptions = { batchMax?: number; batchInterval?: number; diff --git a/packages/apollo-angular/http/src/utils.ts b/packages/apollo-angular/http/src/utils.ts index de20520df..be56e1752 100644 --- a/packages/apollo-angular/http/src/utils.ts +++ b/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; - }; + let multipartInfo: ExtractedFiles; if (shouldUseMultipart) { if (isBatching) { From 140684b0df62122c1d542b5e2583a8b617a44ee4 Mon Sep 17 00:00:00 2001 From: Adrien Crivelli Date: Wed, 18 Sep 2024 18:22:04 +0200 Subject: [PATCH 3/5] Document new syntax for file uploads --- website/src/pages/docs/data/network.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/website/src/pages/docs/data/network.mdx b/website/src/pages/docs/data/network.mdx index 5529783dd..6fbb3bcf1 100644 --- a/website/src/pages/docs/data/network.mdx +++ b/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(), }; From 84315db37b646c828d8a5ba09652a1885827874b Mon Sep 17 00:00:00 2001 From: Adrien Crivelli Date: Wed, 18 Sep 2024 22:00:29 +0200 Subject: [PATCH 4/5] Prettier --- packages/apollo-angular/http/src/http-link.ts | 5 +---- packages/apollo-angular/http/src/utils.ts | 2 +- packages/demo/src/app/pages/author/author-page.component.ts | 5 +---- 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/apollo-angular/http/src/http-link.ts b/packages/apollo-angular/http/src/http-link.ts index 7d40d281f..94b1d5520 100644 --- a/packages/apollo-angular/http/src/http-link.ts +++ b/packages/apollo-angular/http/src/http-link.ts @@ -16,10 +16,7 @@ export class HttpLinkHandler extends ApolloLink { public requester: (operation: Operation) => LinkObservable | null; private print: OperationPrinter = print; - constructor( - private readonly httpClient: HttpClient, - private readonly options: Options, - ) { + constructor(private readonly httpClient: HttpClient, private readonly options: Options) { super(); if (this.options.operationPrinter) { diff --git a/packages/apollo-angular/http/src/utils.ts b/packages/apollo-angular/http/src/utils.ts index be56e1752..f8d8cb03f 100644 --- a/packages/apollo-angular/http/src/utils.ts +++ b/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, ExtractedFiles, ExtractFiles, Request} from './types'; +import { Body, ExtractedFiles, ExtractFiles, Request } from './types'; export const fetch = ( req: Request, diff --git a/packages/demo/src/app/pages/author/author-page.component.ts b/packages/demo/src/app/pages/author/author-page.component.ts index 5638a2614..9d3287d65 100644 --- a/packages/demo/src/app/pages/author/author-page.component.ts +++ b/packages/demo/src/app/pages/author/author-page.component.ts @@ -26,10 +26,7 @@ interface Query { }) export class AuthorPageComponent implements OnInit { posts!: Observable; - constructor( - private readonly apollo: Apollo, - private readonly route: ActivatedRoute, - ) {} + constructor(private readonly apollo: Apollo, private readonly route: ActivatedRoute) {} ngOnInit() { this.posts = this.apollo From f4720788e1c12e3957a594cd41defc78e9a233d2 Mon Sep 17 00:00:00 2001 From: Adrien Crivelli Date: Wed, 18 Sep 2024 22:12:03 +0200 Subject: [PATCH 5/5] Prettier --- .prettierignore | 4 ++++ packages/apollo-angular/http/src/http-link.ts | 5 ++++- packages/demo/src/app/pages/author/author-page.component.ts | 5 ++++- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/.prettierignore b/.prettierignore index 057b474a7..82b8e2afc 100644 --- a/.prettierignore +++ b/.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 diff --git a/packages/apollo-angular/http/src/http-link.ts b/packages/apollo-angular/http/src/http-link.ts index 94b1d5520..7d40d281f 100644 --- a/packages/apollo-angular/http/src/http-link.ts +++ b/packages/apollo-angular/http/src/http-link.ts @@ -16,7 +16,10 @@ export class HttpLinkHandler extends ApolloLink { public requester: (operation: Operation) => LinkObservable | null; private print: OperationPrinter = print; - constructor(private readonly httpClient: HttpClient, private readonly options: Options) { + constructor( + private readonly httpClient: HttpClient, + private readonly options: Options, + ) { super(); if (this.options.operationPrinter) { diff --git a/packages/demo/src/app/pages/author/author-page.component.ts b/packages/demo/src/app/pages/author/author-page.component.ts index 9d3287d65..5638a2614 100644 --- a/packages/demo/src/app/pages/author/author-page.component.ts +++ b/packages/demo/src/app/pages/author/author-page.component.ts @@ -26,7 +26,10 @@ interface Query { }) export class AuthorPageComponent implements OnInit { posts!: Observable; - constructor(private readonly apollo: Apollo, private readonly route: ActivatedRoute) {} + constructor( + private readonly apollo: Apollo, + private readonly route: ActivatedRoute, + ) {} ngOnInit() { this.posts = this.apollo