无法使用graphql-upload和formik上传文件

Question

我正在尝试通过Formik上传带有React-dropzone的图像。

发送此图像时，我将其用于img html上的preview，效果很好。

当我单击“发送”时，仅发送预览对象，其余信息消失...

我不知道是否适用于formik，因为当我打印值时，它会为我提供正确的信息，但是在发送时，一切都会改变。

关于此问题，这里是video，这里是一个example that was deleted, the answer is below。

请帮助！

Answer 1

这是您的Mutation类型：

type Mutation {
  uploadFile(file: Upload!): Boolean!
}

您的架构将uploadFile文件定义为采用file类型的称为Upload!的单个参数。 !表示该参数为非null，即null不能作为值传递给它。

这是您的查询：

mutation UploadFileMutation($file: Upload) {
  uploadFile(file: $file)
}

您正在将变量$ file传递给参数file，但是您已经告诉GraphQL该变量的类型为Upload，而不是Upload!。换句话说，您是说$file 可以为空。根据规范，这无法进行类型验证。

来自spec：

  

变量用法必须与传递给它们的参数兼容。当在完全不匹配的类型的上下文中使用变量时，或者将变量中的可为空的类型传递给非空参数类型时，将发生验证失败。

换句话说，如果该字段是Upload!，则只能使用也定义为Upload!的变量。如果该字段的类型为Upload，则可以传入Upload!或Upload。

TLDR; 将查询更改为：

mutation UploadFileMutation($file: Upload!) {
  uploadFile(file: $file)
}

，或者，如果文件可以为空，则将字段的类型更新为可空。

Answer 2

您的变异操作和架构之间存在类型不匹配。

变异操作接受null值，但架构不接受；因此操作无法通过验证步骤。

将此行更改为Upload!：https://github.com/MontoyaAndres/bug-upload/blob/master/client/src/App.js#L8

或者，如果要允许文件为空，则将架构更改为Upload。