graphql - Dropzone Apollo-upload-client 使用 Upload!类型

Question

我正在使用 apollo-upload-client (所以 graphQL)并尝试使用 dropzone 将文件上传到我的服务器。

我已经使用 <input required onChange={({ target: { validity, files: [file] } })=> this._uploadFiles(validity, file)} 成功地做到了这一点与功能

_uploadFiles = async (validity, file) => {
        if (validity.valid){
            await this.props.addImageFileMutation({
                variables: {file}
            })
        }
    }

对于 Dropzone，我有:

<Dropzone
                      onDrop={this._onDrop.bind(this)}
                      multiple={false}>
                    </Dropzone>

使用函数:

_onDrop = async (acceptedFiles, rejectedFiles) => {
        const firstFile = acceptedFiles[0]
        await this.props.addImageFileMutation({
            variables: { firstFile }
        })
    }

这是每个人发送的文件，它们在我看来是一样的!但它只适用于 <input /> ! 第一个值正在使用 <Dropzone /> , 第二个值使用 <input /> .

你知道我为什么收到这个 $file不匹配 Upload!问题？我在下面添加了更多代码以供引用。

const ADD_IMAGE_FILE_MUTATION = gql`
mutation AddImageFileMutation ($file: Upload!) {
    addImageFile(file: $file){
        id
}}`

Answer 1

在 _onDrop 中，您将一个名为 firstFile 的变量传递给您的突变，但它正在寻找一个名为 file 的变量:

variables: { firstFile }

试试这个:

variables: { file: firstFile }