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

Question

我正在尝试通过 Formik 使用 React-dropzone 上传图像。

当我发送这张图片时，我将它用于 preview 它在一个 img html 上，效果很好。

当我点击发送时，只发送预览对象，其余信息消失...

我不知道是不是为了formik，因为当我打印值时，它会给我正确的信息，但是当发送时，一切都会改变。

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

请帮忙！

Answer 1

这是你的Mutation 类型：

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

您的架构将uploadFile 文件定义为采用file 类型的单个参数Upload!。 ! 表示参数不为空，即不能将 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。