Apollo Angular上传文件报isExtractable必须为函数错误如何解决

• 报错的核心触发逻辑是：Apollo Angular 的 HttpLink 内部处理 multipart 上传时，会调用传入的extractFiles方法，要求该方法的第二个参数isExtractable必须是合法的文件类型判断函数，你当前配置中传入的extractFiles不符合这个调用约定。
• 常见诱因有两个：一是没有正确导入extractFiles方法，或者导入的方法来自版本不兼容的extract-files依赖包，函数签名不匹配；二是错误地将useMultipart: true配置写在了全局 HttpLink 初始化参数中，这个配置项不属于全局link配置，会被底层忽略，同时干扰上传逻辑的参数传递。
• 如果项目中额外安装了apollo-upload-client这类第三方上传适配包，也会和Apollo Angular内置的上传逻辑冲突，触发同类参数校验错误。

按以下步骤调整即可解决问题：

1. 安装版本适配的依赖
   安装和当前Apollo Angular版本兼容的extract-files包，避免版本过高导致的API不兼容：

   npm install extract-files@^11.0.0
   

   如果项目中之前安装过apollo-upload-client，先执行卸载命令移除冲突包：

   npm uninstall apollo-upload-client
   

2. 修正全局GraphQL模块配置
   调整graphql.module.ts的代码，正确导入依赖、传入符合要求的extractFiles配置，移除全局配置中无效的useMultipart字段：

   import { extractFiles, isExtractableFile } from 'extract-files';
   
   const uri = environment.graphQLUrl;
   export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
     return {
       link: httpLink.create({
         uri,
         // 显式传入isExtractableFile作为判断函数，符合底层调用的参数要求
         extractFiles: (requestBody) => extractFiles(requestBody, '', isExtractableFile)
       }),
       cache: new InMemoryCache(),
     };
   }
   
   @NgModule({
     exports: [ApolloModule],
     providers: [
       {
         provide: APOLLO_OPTIONS,
         useFactory: createApollo,
         deps: [HttpLink],
       },
     ],
   })
   export class GraphQLModule {}
   

3. 给文件上传请求单独加multipart配置
   useMultipart: true配置必须加在具体文件上传请求的context字段中，全局配置不生效，示例：

   // 单个文件上传请求示例
   submitUpload(file: File) {
     return this.apollo.mutate({
       mutation: YOUR_UPLOAD_MUTATION,
       variables: { uploadFile: file },
       context: {
         useMultipart: true
       }
     });
   }
   

内容的提问来源于stack exchange，提问作者Wolfeur