如何将图像上传到KeystoneJS GraphQL端点？

Question

我在KeystoneJS AdminUI的自定义字段中使用TinyMCE，这是一个React应用程序。我想将图像从React正面上传到KeystoneJS GraphQL背面。我可以使用添加到Keystone服务器的REST端点上传图像-向TinyMCE传递images_upload_handler回调-但我想利用Keystone已经构建的GraphQL端点获取我已拥有的图像列表/类型创建。

[我首先尝试使用this article中详述的方法，使用axios上传图像

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对象，该对象包含给我的函数

文件名不起作用，blob也不起作用-都给我500个服务器错误-错误消息没有更具体。

我更喜欢使用GraphQL客户端上传图像-another SO article建议使用apollo-upload-client。但是，我在KeystoneJS环境中操作，并且Apollo-upload-client说

Apollo客户端只能有1个“终止” Apollo链接，用于发送GraphQL请求；如果已经安装了诸如apollo-link-http之类的工具，删除它。

[我相信Keystone已经设置了Apollo-link-http（在搜索中出现多次），所以我认为我无法使用Apollo-upload-client。

我很沮丧，不胜感激，您可以提供任何帮助！

Answer 1

UploadLink只是HttpLink的直接替代品。没有理由您不应该使用它。有一个演示KeystoneJS应用here，显示了Apollo Client配置，包括使用createUploadLink。

Upload标量的突变的实际用法显示为here。

查看source code，您应该能够使用自定义image handler并在提供的blob对象上调用blobInfo。像这样的东西：

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