Support Upload Progress: modify to allow for xhr request progress

[justinlevi]

Recognizing this is a pretty hacky approach, this does allow for upload progress using a XHR request instead of fetch.

The implementation would look something like this:

const progressHandler = (e) => {
  if (e.lengthComputable) {
    var percentComplete = e.loaded / e.total;
    console.log("Upload ", Math.round(percentComplete*100) + "% complete.");
  }
}

const xhrFetcher = (url, opts={}, onProgress = progressHandler) => {
  return new Promise( (res, rej)=>{
      var xhr = new XMLHttpRequest();
      xhr.open(opts.method || 'get', url);
      for (var k in opts.headers||{})
          xhr.setRequestHeader(k, opts.headers[k]);
      xhr.onload = e => res(e.target); // e.target only exists on the completion event - this bypasses the ProgressEvent from triggering the promise
      xhr.onerror = rej;
      if (xhr.upload && onProgress)
          xhr.upload.onprogress = onProgress; // event.loaded / event.total * 100 ; //event.lengthComputable
      xhr.send(opts.body);
  });
}

const uploadLink = createUploadLink(
  {
    uri: URL.concat('/graphql'),
    fetch: xhrFetcher
  }
);

[giautm]

Sr, but I don't think we should modify API for XHR. XHR implement should match with fetch.

Check-out whatwg-fetch implement.

[justinlevi]

Not sure what you mean here. ApolloLink requires promises which is not possible with XHR unless you create a wrapper. I'm likely missing something, but do you have a solution otherwise?

[justinlevi]

@giautm Sorry, I'm still not clear what you mean. Am I not doing something very similar to the link you sent? I'm putting a Promise around an XHR request in a way that allows upload progress monitoring. Admittedly it is not pretty, but it works and is a very necessary feature IMHO for dealing with uploads with graphql.

[giautm]

What i mean, you can do somethings like whatwg-fetch implement. But, add xhr.upload to monitor upload progress without modify apollo-upload-client. :D

[jaydenseric]

@justinlevi thanks for sharing the idea, with a bit of polish it might make a nice recipe 👍

I don't think modifying this package is necessary to create/use a fetch alternative that reports progress. The fetch option was created with this use case in mind.

You could make sure the custom fetcher returns a response object that has an ok property and a json() method.

[justinlevi]

@jaydenseric any chance you could show an example of what this fetch alternative would look like? I tried putting something together a bunch of times but failed which is what led me to the solution above.

[justinlevi]

@jaydenseric have you had a chance to look into this at all? This still seems to be an issue with fetch no?
JakeChampion/fetch#89

have you tried to get a progress console.log working with this library?