如何向 Apollo GraphQL 请求添加额外的请求正文值？答案

【问题标题】：How to add additional request body values to Apollo GraphQL request?如何向 Apollo GraphQL 请求添加额外的请求正文值？
【发布时间】：2017-08-21 22:31:05
【问题描述】：

我将 Apollo 与 Scaphold.io 服务一起使用，并且为了向该服务写入 blob，我需要能够向请求正文添加其他选项。

完整的 Scaphold 示例可以在这里找到：https://scaphold.io/docs/#uploading-files

但它做了这样的事情：

form.append("variables", JSON.stringify({
  "input": {
    "name": "Mark Zuck Profile Picture",
    "userId": "VXNlcjoxMA==",
    "blobFieldName": "myBlobField"
  }
}));
// The file's key matches the value of the field `blobFieldName` in the variables
form.append("myBlobField", fs.createReadStream('./mark-zuckerberg.jpg'));

fetch("https://us-west-2.api.scaphold.io/graphql/scaphold-graphql", {
  method: 'POST',
  body: form
}).then(function(res) {
  return res.text();
}).then(function(body) {
  console.log(body);
});

它将 blobField 添加到请求正文的位置。

基于此，我需要将 blobFieldName 属性传递给变量，然后将通过 blob 传递给该属性的值添加到请求正文中。但是，使用 Apollo 我无法添加到请求正文中。我尝试了以下方法，但是当我检查网络检查器时，请求正文中没有它：

export const withCreateCoverPhoto = graphql(CreateCoverPhoto, {
  props: ({mutate}) => ({
    createCoverPhoto: (name, file) => mutate({
      variables: {
        input: {
          blobFieldName: name,
        },
      },
      [name]: file
    }),
  }),
});

请指教。

【问题讨论】：

标签： reactjs graphql apollo react-apollo scaphold

【解决方案1】：

感谢您的提问。目前上传文件的最佳方式是[将其附加到 FormData 并使用 fetch 将其发送到服务器] (https://medium.com/@danielbuechele/file-uploads-with-graphql-and-apollo-5502bbf3941e)。基本上，您将无法在此处为文件本身进行缓存，但这是使用多部分请求处理在 Scaphold 上上传文件的最佳方式。

【讨论】：