node.js - 如何将图像上传到 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 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.

Answer 1

UploadLink 只是 HttpLink 的直接替代品。您没有理由不能使用它。有一个演示 KeystoneJS 应用程序 here显示 Apollo 客户端配置，包括使用 createUploadLink。

Upload 标量突变的实际使用情况显示 here .

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

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