Невозможно загрузить файл с помощью graphql-upload и formik

Question

Я пытаюсь загрузить изображение с помощью React-dropzone через Formik.

Когда я отправляю это изображение, я использую его для предварительного просмотра в img html, что прекрасно работает.

Когда я нажимаю на кнопку отправить, объект предварительного просмотра только отправляется, остальная информация исчезает ...

Я не знаю, если для formik, потому что, когда я печатаю значения, он дает мне правильную информацию, но когда отправлено, все меняется.

Вот видео об этой проблемеи вот небольшой пример, который был удален, ответ ниже .

Пожалуйста, помогите!

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, если вы хотите разрешить обнуление файла.