"ERROR Error: Argument 2 `isExtractable` must be a function." when uploading files with Apollo Angular

Question

According to https://apollo-angular.com/docs/data/network#file-upload, in order to upload files with Apollo Angular you have to add context: {useMultipart: true} to the graphQL query, and the extractFiles function to the httpLink creation.

However, I keep getting this error. It seems that the default isExtractableFile function is not used, and I have no idea why that is.

Here's my graphql.module.ts:

const uri = environment.graphQLUrl; // <-- add the URL of the GraphQL server here
export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
  return {
    link: httpLink.create({uri, useMultipart: true, extractFiles}),
    cache: new InMemoryCache(),
  };
}

@NgModule({
  exports: [ApolloModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    },
  ],
})
export class GraphQLModule {}

Answer 1

found the solution from an open issue on angular-apollo repo.

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

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