graphql - KeystoneJS 在从 AdminUI 上传图像时抛出 INTERNAL_SERVER_ERROR 'Missing multipart field 'operations'

Question

我正在尝试将图像上传到 KeystoneJS。该图像对应于 KeystoneJS 列表Image，具有以下 GraphQL 架构

mutation createImage(data: ImageCreateInput): Image

input ImageCreateInput {
  file: Upload
}

我从 TinyMCE 上传，这是KeystoneJS AdminUI中的一个自定义字段。按照以下说明（如何将图像上传到 KeystoneJS GraphQL 端点？）我正在使用Apollo-upload-client上传图像，该图像显然已作为 Apollo 客户端安装在 AdminUI 中。按照Apollo-upload-client 文档 ，我正在从 TinyMCE 内部上传 blobimages_upload_handler

const UPLOAD_MUTATION = gql`mutation upload($data: ImageCreateInput!) {
    createImage(data: $data) {
      id
      file {
        path
        filename
      }
    }
  }
`;

images_upload_handler: function(blobInfo, success, failure) {

            const image = blobInfo.blob();
            try {
                log.debug('about to mutate');
                log.debug(client);
                client.mutate(
                {
                mutation: UPLOAD_MUTATION,
                variables: { data: { file: image } }
                }
                ).then(result => {
                log.debug('result');
                log.debug(result);
                success(result);
                });
                } catch (e) {
                log.debug('error', e.toString());
            failure(e);
            }
    }

但是 KeystoneJS 记录以下错误，抱怨Missing multipart field 'operations'.

{"level":50,"time":1584092923059,"pid":29020,"hostname":"somewhere.or.other","name":"graphql","message":"缺少多部分字段“操作” ( https://github.com/jaydenseric/graphql-multipart-request-spec )。","extensions":{"code":"INTERNAL_SERVER_ERROR"},"uid":"ck7q00y3x0000e4rjfevaapo3","stack":"\ n module.exports (node_modules/ensure-error/index.js:28:16)\n _formatError (node_modules/@keystonejs/app-graphql/lib/apolloServer.js:97:44)\n
node_modules/apollo-server- errors/dist/index.js:167:34\n Array.map ()\n Object.formatApolloErrors (node_modules/apollo-server-errors/dist/index.js:165:27)\n
node_modules/apollo-server-express/dist/ApolloServer.js:47:39\n
runMicrotasks ()\n","name":"BadRequestError","v":1}

网络响应是

Summary
URL: http://localhost:4545/admin/api
Status: 400 Bad Request
Source: Network
Address: ::1:4545

Request
POST /admin/api HTTP/1.1
Cookie: keystone.sid=s%3A2OXYDUkDenT3i6yu3lVQpSafC3AQ_5vq.XiOyB1gahSc%2FFjaNq36dnEIL4Vk0VwR%2FBq6lY7NDLyk
Accept: */*
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDjNz6A1qrij1s1Ye
Origin: http://localhost:4545
Content-Length: 10871
Accept-Language: en-us
Host: localhost:4545
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.1 Safari/605.1.15
Referer: http://localhost:4545/admin/articles/5e6a119a07e2e826a71b0cf5
Accept-Encoding: gzip, deflate
Connection: keep-alive

Response
HTTP/1.1 400 Bad Request
Access-Control-Allow-Credentials: true
X-Content-Type-Options: nosniff
Content-Security-Policy: default-src 'none'
Content-Type: text/html; charset=utf-8
Date: Fri, 13 Mar 2020 13:18:09 GMT
Connection: keep-alive
Vary: Origin
Content-Length: 142
Access-Control-Allow-Origin: *
X-Keystone-App-Version: 1.0.0
X-Powered-By: Express

Request Data
MIME Type: multipart/form-data
Boundary: ----WebKitFormBoundaryDjNz6A1qrij1s1Ye
Request Data: 

------WebKitFormBoundaryDjNz6A1qrij1s1Ye
Content-Disposition: form-data; name="operations"

{"operationName":"upload","variables":{"data":{"file":null}},"query":"mutation upload($data: ImageCreateInput!) {\n  createImage(data: $data) {\n    id\n    file {\n      path\n      filename\n      __typename\n    }\n    __typename\n  }\n}\n"}
------WebKitFormBoundaryDjNz6A1qrij1s1Ye
Content-Disposition: form-data; name="map"

{"1":["variables.data.file"]}
------WebKitFormBoundaryDjNz6A1qrij1s1Ye
Content-Disposition: form-data; name="1"; filename="blip.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryDjNz6A1qrij1s1Ye--

我是 GraphQL 的相对新手，我找到的关于这个错误的答案apollo-upload-client似乎是针对那些安装自己的 Apollo 服务器的人，而我正在使用已经设置好的东西。

标签： graphqlapolloapollo-clientapollo-serverkeystonejs