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:

#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.