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

Question

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

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

请帮忙。

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

在您的左轮手枪中，您可以在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
    });
   }

我希望这有助于或至少使您走上正确的道路。