将文件从 Angular 7 Web App 上传到 Apollo 2.0 GraphQL Server

Question

我正在尝试使用 Angular Apollo 作为客户端和 Apollo 2.0 作为服务器上传文件。

相信我，我尝试了所有教程，例如我可以在互联网上找到但没有帮助的示例。有一个名为 apollo-upload-file 的库，他们给出了如何实现它的示例，但在客户端他们使用了 React。虽然我尝试实施他的例子，但没有任何效果。

请帮忙。

Answer 1

服务器

在您的架构中，您需要将文件参数定义为上传类型，这是 Apollo 提供的内置类型

const { gql } = require('apollo-server');

const TypeDef = gql `
  type Mutation {
    upload(file: Upload!)
  }
`

如果您收到关于上传类型不是类型的错误，您也可以在您的架构中定义它（我遇到了这个问题）

const { gql } = require('apollo-server');

const TypeDef = gql `
  scalar Upload

  type Mutation {
    upload(file: Upload!)
  }
`

在您的左轮手枪中，您可以访问 args 中的文件，需要注意的是，该文件将是一个承诺；

const resolver = {
        Mutation: {
            async upload(obj, args, context, info) {
                const file = await args.file;
                // ... DO STUFF
            },
        }
}

客户

在客户端中，您需要使用该apollo-angular-link-http包来帮助上传文件。在context请求使用的时候需要设置useMultipart : true

查询看起来像这样

const uploadFileMutation = gql`
  mutation UploadMutation(
    $file: Upload!
  ) {
    upload(file: $file) {
        YOUR RESPONSE
      }
    }
  }
`

Apollo 请求将如下所示

  constructor(
    private Apollo: Apollo
  ) { }

  fileUpload(file){
    this.Apollo.mutate<any>({
      mutation: uploadFileMutation,
      variables: {
        file: this.file
      },
      context: {
         useMultipart: true
      }
    }).subscribe(({ data }) => {
       this.response = data.upload
    });
   }

我希望这会有所帮助，或者至少能让您走上正轨。