如何将图像上传到KeystoneJS GraphQL端点? [英] How can one upload an image to a KeystoneJS GraphQL endpoint?
问题描述
我在KeystoneJS AdminUI的自定义字段中使用TinyMCE，这是一个React应用程序.我想将图像从React正面上传到KeystoneJS GraphQL背面.我可以使用添加到Keystone服务器的REST端点上传图像-向TinyMCE传递images_upload_handler回调-但我想利用Keystone已经构建的GraphQL端点获取我已拥有的图像列表/类型创建.
I'm using TinyMCE in a custom field for the KeystoneJS AdminUI, which is a React app. I'd like to upload images from the React front to the KeystoneJS GraphQL back. I can upload the images using a REST endpoint I added to the Keystone server -- passing TinyMCE an images_upload_handler callback -- but I'd like to take advantage of Keystone's already-built GraphQL endpoint for an Image list/type I've created.
我首先尝试使用本文中详细介绍的方法， axios上传图片
I first tried to use the approach detailed in this article, using axios to upload the image
const getGQL = (theFile) => {
const query = gql`
mutation upload($file: Upload!) {
createImage(file: $file) {
id
file {
path
filename
}
}
}
`;
// The operation contains the mutation itself as "query"
// and the variables that are associated with the arguments
// The file variable is null because we can only pass text
// in operation variables
const operation = {
query,
variables: {
file: null
}
};
// This map is used to associate the file saved in the body
// of the request under "0" with the operation variable "variables.file"
const map = {
'0': ['variables.file']
};
// This is the body of the request
// the FormData constructor builds a multipart/form-data request body
// Here we add the operation, map, and file to upload
const body = new FormData();
body.append('operations', JSON.stringify(operation));
body.append('map', JSON.stringify(map));
body.append('0', theFile);
// Create the options of our POST request
const opts = {
method: 'post',
url: 'http://localhost:4545/admin/api',
body
};
// @ts-ignore
return axios(opts);
};
但是我不确定作为theFile传递什么-我需要从其中调用图像上传的TinyMCE的images_upload_handler接受一个blobInfo对象，该对象包含给我的功能
but I'm not sure what to pass as theFile -- TinyMCE's images_upload_handler, from which I need to call the image upload, accepts a blobInfo object which contains functions to give me
文件名不起作用，blob也不起作用-都给我500个服务器错误-错误消息没有更具体.
The file name doesn't work, neither does the blob -- both give me server errors 500 -- the error message isn't more specific.
我希望使用GraphQL客户端上传图像-另一篇SO文章建议使用 apollo-upload-client .但是，我在KeystoneJS环境中操作，Apollo-upload-client说
I would prefer to use a GraphQL client to upload the image -- another SO article suggests using apollo-upload-client. However, I'm operating within the KeystoneJS environment, and Apollo-upload-client says
Apollo客户端只能有1个终止" Apollo链接，用于发送 GraphQL请求；如果已经安装了诸如apollo-link-http之类的工具， 删除它.
Apollo Client can only have 1 "terminating" Apollo Link that sends the GraphQL requests; if one such as apollo-link-http is already setup, remove it.
我相信Keystone已经设置了Apollo-link-http(在搜索中会出现多次)，所以我认为我不能使用Apollo-upload-client.
I believe Keystone has already set up Apollo-link-http (it comes up multiple times on search), so I don't think I can use Apollo-upload-client.
推荐答案
UploadLink只是HttpLink的直接替代.没有理由您不应该使用它.有一个演示KeystoneJS应用程序这里显示Apollo客户端配置，包括使用createUploadLink.
The UploadLink is just a drop-in replacement for HttpLink. There's no reason you shouldn't be able to use it. There's a demo KeystoneJS app here that shows the Apollo Client configuration, including using createUploadLink.
Actual usage of the mutation with the Upload scalar is shown here.
查看源代码，您应该可以使用自定义的
Looking at the source code, you should be able to use a custom image handler and call blob on the provided blobInfo object. Something like this:
tinymce.init({
images_upload_handler: async function (blobInfo, success, failure) {
const image = blobInfo.blob()
try {
await apolloClient.mutate(
gql` mutation($image: Upload!) { ... } `,
{
variables: { image }
}
)
success()
} catch (e) {
failure(e)
}
}
})
这篇关于如何将图像上传到KeystoneJS GraphQL端点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
