jaydenseric / graphql-upload

Middleware and an Upload scalar to add support for GraphQL multipart requests (file uploads via queries and mutations) to various Node.js GraphQL servers.
https://npm.im/graphql-upload
MIT License
1.42k stars 131 forks source link

get file nothing when files array with video with [Upload] type #355

Closed Parkjunwu closed 1 year ago

Parkjunwu commented 1 year ago

Hello!

I use this library very well, but when upload video file with other files then files nearby video return nothing on backend.

Logging File with console.log, then return just { "promise": {} }

mutation type fileArr:[Upload!]!,

Case 1 : When I send upload data on react-native app by ReactNativeFile like

[ { "uri": "file:///my-file-path1.jpg", "name": "0.jpg", "type": "image/jpeg" }, { "uri": "file:///my-file-path2.jpg", "name": "1.jpg", "type": "image/jpeg" }, { "uri": "my-file-path3.jpg", "name": "2.jpg", "type": "image/jpeg" }, { "uri": "my-file-path4.mp4", "name": "3.mp4", "type": "video/mp4" }, { "uri": "my-file-path5.jpg", "name": "4.jpg", "type": "image/jpeg" } ]

then backend get data like

[ { "promise": {}, "file": { "filename": "0.jpg", "mimetype": "image/jpeg", "encoding": "7bit" } }, { "promise": {}, "file": { "filename": "1.jpg", "mimetype": "image/jpeg", "encoding": "7bit" } }, { "promise": {} }, { "promise": {} }, { "promise": {} } ]

Case 2 :

app sending data [ { "uri": "my-file-path0.mp4", "name": "0.mp4", "type": "video/mp4" }, { "uri": "my-file-path1.mp4", "name": "1.mp4", "type": "video/mp4" } ]

then backend get data

[ { "promise": {}, "file": { "filename": "0.mp4", "mimetype": "video/mp4", "encoding": "7bit" } }, { "promise": {} } ]

I think this is problem when upload video with other files, because upload only one video file or upload only many image files work well.

I think sending files have no problem on react-native app, because get no problem when logging with console.log.

And try this on Altair graphql client, same problem occur too. So I think this is backend problem.

But sometimes uploading video with other files works with no problem, so I'm not convinced.

Thank you!

backend "graphql": "^16.6.0", "graphql-upload": "^15.0.2",

app "graphql": "^16.6.0", "apollo-upload-client": "^17.0.0",

Parkjunwu commented 1 year ago

Maybe this is because file size, but on https://github.com/jaydenseric/graphql-upload/blob/master/processRequest.mjs it might return error if file's size exceed maxFieldSize, maxFileSize. But no error return so I confused. I want to know about this problem.

jaydenseric commented 1 year ago

Logging File with console.log, then return just { "promise": {} }

Are you sure it's not working as expected? You can't just log file upload scalar values which are unfulfilled promises and immediately expect to see anything; files upload in stream chunks and become uploaded over time.

You need to follow the instructions and await the file upload promises, but in a way that is async if they are an array of files like yours is, using something like Promise.allSettled.

Make sure that every file upload promise is awaited, and then a read stream is created from the result and in turn promisified and awaited. If you don't, then the server will send a response before the client has finished streaming up the files.

If you do everything correctly, and still see an issue, please create a minimal reproduction without React Native and we can investigate further.

I now have a policy of not supporting React Native, and have removed workarounds for it from my packages. Users can take on the burden themselves if they so choose to get GraphQL multipart requests working with it, which should still be possible. React Native has done a lot of buggy things with file uploads and multipart requests in the past, and after a lot of hard work (it's difficult for me to assist with investigations because I'm not a React Native user) it was always an esoteric React Native bug that Facebook hadn't fixed in years. One of the ridiculous things that would happen is multipart requests would fail in weird ways if you had React Native dev tools open and watching network requests. Close all those tools and the requests would work.

Parkjunwu commented 1 year ago

I think await the file upload promises process doesn't have problem because I make upload promises with array.map(async() => function) and Promise.all. I still have this issue not only upload video but also upload only images. Because files getting order is first to last (for example, [Upload] getting result is [ get, get, get, not get, not get ]), and first file get always, so I think this problem is maybe from networking size...

Parkjunwu commented 1 year ago

Finally I found why this is happened.

Because I don't make Upload's resolver ......

Thank you!!