apollo-upload-client icon indicating copy to clipboard operation
apollo-upload-client copied to clipboard

Unable to track file upload progress on Apollo Client v3-

Open owusuappiah opened this issue 1 year ago • 3 comments

So I have followed on what is recommended here on how to track progress on file upload. On apollo-client v3, it looks like xhr.upload.onprogress is not really working as expected.

Issue is: It doesn't return the progress ranges until when it is 1 (donating 100%).

Followed up on @n1ru4l's solution in this section on an attempt to solve this for Apollo Client v3, and it seems not to work.

What do you think the issue is? Are there any potential updates since these suggestions from here please?

owusuappiah avatar May 08 '24 12:05 owusuappiah

It doesn't return the progress ranges until when it is 1 (donating 100%).

I don't know if any of that old code your reference is still a good idea, but are you sure that your files are not just small enough that it actually does upload them in one chunk?

jaydenseric avatar May 08 '24 13:05 jaydenseric

That was what I twas thinking initially, but not really. I did test it out with files that are pretty much large. I have tried with 200MB, to 2 gigs files.

owusuappiah avatar May 08 '24 13:05 owusuappiah

Regarding the old code reference, you are right. Not sure if there is another way to get this to work. There isnt much docs on this stuff as well, at least for this library to achieve file upload progress.

What is your best advice please?

owusuappiah avatar May 08 '24 13:05 owusuappiah

I am also looking for a solution into this, this solution doesn't work anymore , on version v3.8.7

MarcusCody avatar Jun 18 '24 12:06 MarcusCody

I don't think the community needs me to change anything about the apollo-upload-client API to be able to figure out how to configure the fetch options with Apollo links to track upload progress. This issue is more of a usage question about how the package and Apollo Client can be used, than a specific feature request or bug report that I must action in this codebase. As such, I am closing this issue. Not because it's not an interesting problem or that documenting how projects can figure Apollo Client to get this working wouldn't help some people, it's just that it's not something I can work on solving because I don't have the need for this in any of my projects, so I can't dedicate personal time to figuring out the right answer. Chances are, the solution could be published in a completely different package as an Apollo link projects can plug into their Apollo Client config.

If anyone figures out the right way to configure Apollo Client for upload progress, feel free to comment it here.

Some thoughts… My instinct is to keep the solution 100% native fetch API based; web standards have improved a lot with fetch and web streams as well as runtime support. Has anyone tried using the latest web streams APIs for the fetch request? E.g:

https://github.com/teil-one/fetch-api-progress/blob/ec9022b3ee12b422b0319caab630f930898af1f9/src/trackRequestProgress.ts#L82-L87

jaydenseric avatar Jul 17 '24 22:07 jaydenseric

@jaydenseric Sadly streams are still not supported as body officially. Just Chrome seems to somehow support it but it's it's experimental and not something I want to build on TBH. Also it requires HTTP 2.0 on the backend side which I sadly cannot easily change at my company.

levrik avatar Sep 27 '24 11:09 levrik