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

Question

我正在使用ExpressJS和NEXTJS作为前端，Apollo server v4作为后端。我想创建一个Mutation，使用upload-graphql将文件上传到我的后端服务器。

上传类型

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”的错误提示。

我认为，目前还没有通过新版本的Apollo服务器（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",   },

我尝试在我的前端 Next.js 应用中使用 apollo-upload-client 上传文件，并且进行了前端上传的场景。

这只是一个“爱好项目”，我知道有其他选择来上传文件，比如使用额外的端点API或像S3那样使用其他方法，但我想通过GraphQL上传我的文件。

- mohammad

---

你找到解决方案了吗？自从@apollo/server的版本4默认使用“CSRF预防功能”，所以你必须在createUploadLink中添加“Apollo-Require-Preflight”头才能使其正常工作。 - NicoSan

不，实际上我没有找到任何解决方案。如果您有，请提供一段代码@NicoSan - mohammad

还是没有任何进展吗？我已经升级到Apollo Server 4，但出现了一些问题，比如“错误：表单意外结束”。 - Rama

Answer 1

根据您的要求，这里是一段基于您提供的源代码的代码片段（未经测试），但您应该在createUploadLink中添加"Apollo-Require-Preflight"头使其正常工作。

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

- NicoSan