将文件从 Angular 7 Web 应用上传到 Apollo 2.0 GraphQL 服务器

Question

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

相信我，我尝试了互联网上可以找到的所有教程和示例，但并没有帮助。有一个叫做apollo-upload-file的库，他们给出了一个如何实现它的示例，但在客户端，他们使用了React。虽然我尝试了实现他的示例，但是什么都不起作用。

请帮忙。

- DDD

Answer 1

服务器

在您的模式中，您需要将文件参数定义为类型“Upload”，这是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!)
  }
`

在您的转轮手枪中，您可以访问参数中的文件。需要注意的一点是，该文件将是一个Promise（承诺）。

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
      }
    }
  }
`

阿波罗请求的格式如下

  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
    });
   }

我希望这可以帮助你，或者至少让你走上正确的轨道。

- Murry is Developing