如何使用 Relay Modern 突变进行文件上传？

Posted 2023-03-08

【中文标题】如何使用 Relay Modern 突变进行文件上传？

【英文标题】：How to do file uploads with Relay Modern mutations?

【发布时间】：2017-12-30 12:22:28

【问题描述】：

我正在使用react-relay/compat 1.1.0，我需要编写一个能够上传文件的突变。 在 Relay Classic 中，您可以使用 getFiles() 支持突变中的文件上传：

class AddImageMutation extends Relay.Mutation 
   getMutation() 
     return Relay.QL`mutation introduceImage `;
   

   getFiles() 
     return 
       file: this.props.file,
     ;
   
   ...

但在Relay Modern docs 中没有发现任何上传文件功能的痕迹：

const commitMutation = require('react-relay');

commitMutation(
  environment: Environment,
  config: 
    mutation: GraphQLTaggedNode,
    variables: Variables,
    onCompleted?: ?(response: ?Object) => void,
    onError?: ?(error: Error) => void,
    optimisticResponse?: ?() => Object,
    optimisticUpdater?: ?(store: RecordSourceSelectorProxy) => void,
    updater?: ?(store: RecordSourceSelectorProxy) => void,
    configs?: Array<RelayMutationConfig>,

    // files: ... ?
  ,
);

在现代继电器中是否支持？如果是这样，这样做的方法是什么？谢谢。

【参考方案1】：

您必须在commitMutation 的config 对象中将文件作为对象uploadables 提供，然后在您的网络层实现实际上传，因为对服务器的获取请求必须是多部分形式而不是应用程序/json。

有关完整示例，请参阅 https://github.com/facebook/relay/issues/1844#issuecomment-316893590。

【讨论】：

我不知道如何使用useMutation

【参考方案2】：

发现这个问题，因为我自己也有同样的问题。

还不确定完整的答案，但我开始阅读 Relay 源代码并根据 packages/relay-runtime/mutations/commitRelayModernMutation.js 看起来您可以将 uploadables 传递给您的突变。