如何通过 Apollo Server v4 和 graphql-upload 上传文件？

Question

我在前端使用带有 expressjs 和 NEXTJS 的 Apollo 服务器 v4。我想要的是使用 upload-graphql 创建一个类似 uploadFile 的 Mutation，以将文件上传到我的后端服务器。

上传类型

export interface Upload {
    filename: string;
    mimetype: string;
    encoding: string;
    createReadStream: () => Stream;
  }

我的突变：

@Mutation(() => Boolean)
  async uploadFile(
    @Arg("picture", () => GraphQLUpload)
    { createReadStream, filename }: Upload
  ): Promise<boolean> {
    return new Promise(async (resolve, reject) =>
      createReadStream()
        .pipe(createWriteStream(__dirname + `/../../../images/${filename}`))
        .on("finish", () => resolve(true))
        .on("error", () => reject(false))
    );
  }
}

但问题是，每当我上传照片之类的东西时， 我得到

ApolloError: Argument Validation Error

.

我想，还没有办法通过新版本的阿波罗服务器（v4）上传，但如果有人知道，请帮助我！

我的依赖

"dependencies":{
   "@apollo/server": "^4.3.1",     
   "express": "^4.18.2",
   "graphql": "^16.6.0",     
   "graphql-fields": "^2.0.3",     
   "graphql-middleware": "^6.1.33",     
   "graphql-scalars": "^1.20.1",     
   "graphql-shield": "^7.6.5",     
   "graphql-upload": "14",     
   "type-graphql": "2.0.0-beta.1",   },

我尝试在我的前端 nextjs - apollo-upload-client 上上传一个文件。

和前端上传场景

这只是一个爱好项目，我知道有替代方案使用其他方法上传文件=>像额外的端点api或像s3一样使用，但我想通过graphql上传我的文件。

Answer 1

根据要求，这里有一段基于您的来源的代码（未经测试），但您应该将“Apollo-Require-Preflight”标头添加到 createUploadLink 中以使其工作

export const client = new ApolloClient({
    link: createUploadLink({
         headers: {"Apollo-Require-Preflight": "true"},
    }),
    cache: new InMemoryCache(),
});