Can't use file upload, "ERROR Error: Argument 2 `isExtractable` must be a function."

[Wolfeur]

Describe the bug

Despite completing the required steps needed to enable file uploads according to the doc, the following error systematically occurs: ERROR Error: Argument 2 `isExtractable` must be a function.

To Reproduce

1. Create a new project with Angular ^13.3.0, install apollo-angular and the extract-files module. Configure Apollo to use any backend that receives Upload.
2. Follow the steps given in the doc to enable file uploads.
3. Add a function that calls any mutation with an Upload as variable, and bind it to a change event on an input tag.
4. Build and test the input tag, check the error message on the console.

Environment:

├── @angular/cli@13.3.8 ├── @angular/core@13.3.11 ├── @apollo/client@3.6.9 ├── apollo-angular@3.0.1 ├── graphql@16.5.0 └── typescript@4.5.5

[freon27]

I was having this problem too. Even if you already solved it, maybe it will help the next person who stumbles on this.

I found the solution here:

https://github.com/kamilkisiela/apollo-angular/issues/1757

Basically you need to import two functions from extract-files:

import extractFiles from 'extract-files/extractFiles.mjs';
import isExtractableFile from 'extract-files/isExtractableFile.mjs';

And then provide a function that uses them:

httpLink.create({
  ...
  extractFiles: (body) => extractFiles(body, isExtractableFile),
});

[Wolfeur]

This solution is so stupidly simple I'm ashamed I didn't think of it.

[PowerKiKi]

Fixed in 04fdd28ff6aa3b4b844488c5b20a55f0bfa60e19 and doc is also updated (soon to be published).