如何使用apollo-angular-graphql上传文件?
How to upload files with apollo-angular-graphql?
我正在寻找可用于使用 apollo-angular 包通过 graphql 突变上传文件的包。
另外,任何人都可以帮助我了解将文件上传到服务器和从服务器获取文件的格式吗?
感谢您的宝贵时间。
在您的服务器架构中,您需要将文件参数定义为上传类型。这是 Apollo 提供的内置类型。但是,如果您确实遇到有关上传类型的错误,只需将其添加为 custom Scalar type.
const { gql } = require('apollo-server');
const TypeDef = gql `
scalar Upload
type Mutation {
upload(file: Upload!)
}
`
在你的 revolvers 中你可以访问你的 args 中的文件,需要注意的是该文件将是一个承诺;
const resolver = {
Mutation: {
async upload(obj, args, context, info) {
const file = await args.file;
// ... DO STUFF
},
}
}
您要查找的上传文件包是apollo-angular-link-http
package。在查询上下文中,您需要将 useMultipart 设置为 true。
所以文件上传请求应该看起来像这样。
// The Mutation Query Using Type of 'Upload' to represent the file
const uploadFileMutation = gql`
mutation UploadMutation($file: Upload!) {
upload(file: $file) {
YOUR RESPONSE
}
}
}
// The Apollo Client request
// Context of 'useMultipart' needs to be set to true to enable file upload
this.Apollo.mutate<any>({
mutation: uploadFileMutation,
variables: {
file: this.file
},
context: {
useMultipart: true
}
}).subscribe(({ data }) => {
this.response = data.upload
});
我正在寻找可用于使用 apollo-angular 包通过 graphql 突变上传文件的包。 另外,任何人都可以帮助我了解将文件上传到服务器和从服务器获取文件的格式吗?
感谢您的宝贵时间。
在您的服务器架构中,您需要将文件参数定义为上传类型。这是 Apollo 提供的内置类型。但是,如果您确实遇到有关上传类型的错误,只需将其添加为 custom Scalar type.
const { gql } = require('apollo-server');
const TypeDef = gql `
scalar Upload
type Mutation {
upload(file: Upload!)
}
`
在你的 revolvers 中你可以访问你的 args 中的文件,需要注意的是该文件将是一个承诺;
const resolver = {
Mutation: {
async upload(obj, args, context, info) {
const file = await args.file;
// ... DO STUFF
},
}
}
您要查找的上传文件包是apollo-angular-link-http
package。在查询上下文中,您需要将 useMultipart 设置为 true。
所以文件上传请求应该看起来像这样。
// The Mutation Query Using Type of 'Upload' to represent the file
const uploadFileMutation = gql`
mutation UploadMutation($file: Upload!) {
upload(file: $file) {
YOUR RESPONSE
}
}
}
// The Apollo Client request
// Context of 'useMultipart' needs to be set to true to enable file upload
this.Apollo.mutate<any>({
mutation: uploadFileMutation,
variables: {
file: this.file
},
context: {
useMultipart: true
}
}).subscribe(({ data }) => {
this.response = data.upload
});