zekfad / fetch_client

Fetch based Client for HTTP package.

Hi! I'm full-stack web developer! 👋

I like Dart programming language and Flutter framework.

GPG Public key

C164804976DB9411

You can send me encrypted e-mail, or verify my commits and so on via my public key.

Get the key via keyserver

Use gpg --recv-keys 0xC164804976DB9411 or gpg --keyserver {keyserver} --recv-keys 0xC164804976DB9411 to get my public key. It's published on the folliwing key servers:

• pgp.mit.edu
• keyserver.ubuntu.com
• zimmermann.mayfirst.org
• attester.flowcrypt.com

ASCII-armored key

-----BEGIN PGP PUBLIC KEY BLOCK-----

mDMEXwHLshYJKwYBBAHaRw8BAQdAsdn0DAznpr7nXili2v/TXUn8gSCc9uvCox8E
ibNtiQC0LFlhcm9zbGF2IFZvcm9iZXYgPHZvcm9iZXZ5YXJvc2xhdkBnbWFpbC5j
b20+iJAEExYIADgWIQTmWK+e40pJohm5hTnBZIBJdtuUEQUCXwHLsgIbIwULCQgH
AgYVCgkICwIEFgIDAQIeAQIXgAAKCRDBZIBJdtuUEQftAQCpm76uQUKwU/+iEDX7
k+uRYMjmVrlY2d4ji2kmyclmFwD/dOm6ty8EYnSApL8nBxLT88QQrgmkT10PzrER
FJXgFAO0HFpla2ZhZCA8emVrZmFkQHpubm1lLmV1Lm9yZz6IkAQTFggAOBYhBOZY
r57jSkmiGbmFOcFkgEl225QRBQJfAc8BAhsjBQsJCAcCBhUKCQgLAgQWAgMBAh4B
AheAAAoJEMFkgEl225QRcOkA/jWb0RT/Fn7nSFMpqkOvez8bwLYCPmoCVK6BJ5Qt
17PRAP0TP+lCoBn3ZUCdkkZ4gWW5gQ6JUZLigXaa25sUQxCUB7g4BF8By7ISCisG
AQQBl1UBBQEBB0BLt0jns6wf8X5TcZoA0jOu2inXs9Hn44EDWSXt+eLKNgMBCAeI
eAQYFggAIBYhBOZYr57jSkmiGbmFOcFkgEl225QRBQJfAcuyAhsMAAoJEMFkgEl2
25QRcVgBAKW74jwweeB2TmKRnBUYWZY/VJGYYjcvAdkZbMNGlP9tAQDTT2F56x92
a49PFj0tVkVXFDM6eX7IXErfjddjLF1mBQ==
=45UK
-----END PGP PUBLIC KEY BLOCK-----

fetch_client's Issues

Support backpressure via stream pausing

Pausing the stream has no immediate downsides, even if stream will buffer events, it wont make difference because data would still be buffered but on JS side otherwise.

Example implementation on JS, it uses pull to resume the stream, we could do the same:
https://streams.spec.whatwg.org/#example-rs-push-backpressure

Checklist:

• Feature check for old browsers.
• Update fetch_api.

Usage with muli-platform apps

Hi,

Given that this package is web only, do you have any recommendation how to use this package in multi-platform flutter env?
So how can we make flutter web fallback on this package, and use dart:http on other platforms ?

FetchClient(mode: RequestMode.cors) error

With the latest Flutter stable version, now get this error when using "FetchClient(mode: RequestMode.cors)":

"Expected a value of type 'Iterator', but got one of type 'DomIterator'"

Setup:

• Flutter version 3.13.4 on channel stable at /Users/andy/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 367f9ea16b (28 hours ago), 2023-09-12 23:27:53 -0500
• Engine revision 9064459a8b
• Dart version 3.1.2
• DevTools version 2.25.0

Failed to fetch stream on web

Hi, I am having trouble fetching the stream on Flutter Web. I tried a lot, but it didn't work

log("FETCH CLIENT ++++++++++++++++++");
        final client = FetchClient(
          mode: RequestMode.cors,
          streamRequests: true,
        );

        final uri =
            Uri.parse("https://my uri");
        final stream = (() async* {
          yield Uint8List.fromList(
            '''
      {
        "name": "My cool data",
        "data": {
          "data_part_1": "part_1",
      '''
                .codeUnits,
          );
          await Future<void>.delayed(const Duration(seconds: 1));
          yield Uint8List.fromList(
            '''
          "data_part_2": "part_2"
        }
      }
      '''
                .codeUnits,
          );
        })();

        final request = StreamedRequest('POST', uri)
          ..headers.addAll({
            "Authorization": "Bearer $idToken",
            'content-type': 'application/json',
          })
          ..sink.add(utf8.encode(json.encode(body)));
         // body is the map of data that I've to pass with post request
        
        stream.listen(
          request.sink.add,
          onDone: request.sink.close,
          onError: request.sink.addError,
        );

        final response = await client.send(request);

        log(await utf8.decodeStream(response.stream));

        return;

Log Error: error Failed to execute fetch: TypeError: Failed to fetch

Backwards compatibility

There are still some errors pop up, due to language version restrictions.
To allow generics in JS interop - language must be set to 3.3.

Current version of client 1.0.2 will be the last to support Dart >=2.19 <4, in the next version I'll set minimum language version to 3.3.
Public API won't change, but it will be feature update, Dart >=3.3 users will benefit from updated interop, while old versions will continue to use >=1.0.2 <1.1.0, default caret constraint on fetch_api will leave place for critical fixes to the old branch.

Checklist:

• Fetch API migrate to dart:js_interop
• Bump major and language version for fetch_api
• Remove compatibility layer
• Bump feature and language for fetch_client
• Migrate internals to new fetch_api

StreamedRequest Fails on Large File Upload in Chrome When Tab Not in Focus

Hello, first of all, thanks for the library and its maintenance. :)

Issue

We are experiencing an issue when uploading using the StreamedRequest. We are sending the file as the body of the request. Sometimes, for large files, for example, 500MiB, it causes the following error:

TypeError: Failed to fetch
POST https://example.com/upload net::ERR_FAILED

Steps to reproduce

Here are the steps to reproduce it - Using Chrome

• Open a new instance
• Try uploading a file of 600MB. You can use the openRead API from the File object.
• As soon as the file starts uploading, switch to another app.
• Let the page lose focus for at least 3 or 4 minutes and the upload fails.
• If we come back after 3 or 4 minutes and it hasn't failed, let's switch away from the page for another 1 or 2 minutes.
• Then, let's return to our page.
• Upload fails.

Related Issues/PRs:

Possibly related to: w3c/ServiceWorker#1246

Support for flow control?

If the listener of fetch's response stream is slower at processing the data than the download speed, then the listener stream's sink grows in size indefinitely.

Is there any way to bridge the nice flow control of dart streams with fetch on the JS side?

Error: Expected a value of type 'Iterator', but got one of type 'DomIterator'

when i run project on chrome in debug mode it will through error at below second line
client = FetchClient(mode: RequestMode.cors, streamRequests: true);
final response = await client.send(http.Request("GET", uri));

it works perfectly on release mode

how to solve it??

Upgrade http to ^1.0.0

Currently package uses http ^0.13.5 which prevents package usage in projects with http ^1.0.0

NotSupportedError: ReadableStream uploading is not supported

NotSupportedError: ReadableStream uploading is not supported
This error occurs in Safari on iOS and macOS, but everything works fine on other platforms.

Large payload with keep alive (default) causes errors

I'm using pocketbase realtime for web using this client as the developer mentioned here
But when I try to upload file with MultipartFile from http

await pb.collection('games').update(
        model.id,
        body: body,
        files: files,
)

It seems to break only when uploading files that are bigger than 1mb and gives me this error

ClientException: {url: https://url/api/collections/test/records/3gc4a6fn6hgi4nh, isAbort: true, statusCode: 0, response: {}, originalError: Failed to execute fetch: TypeError: Failed to fetch}
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 288:49  throw_
packages/pocketbase/src/client.dart 200:9                                     send
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 60:31            <fn>
dart-sdk/lib/async/zone.dart 1666:54                                          runBinary
dart-sdk/lib/async/future_impl.dart 162:22                                    handleError
dart-sdk/lib/async/future_impl.dart 796:46                                    handleError
dart-sdk/lib/async/future_impl.dart 817:13                                    _propagateToListeners
dart-sdk/lib/async/future_impl.dart 592:5                                     [_completeError]
dart-sdk/lib/async/future_impl.dart 683:7                                     callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                              _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                               _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 177:15           <fn>

is there anything I can contribute with in fetch_client package

Hi, thank you for your work, the package is very helpful, I wonder if there is something I can help with here.

Anas.

Instance of 'Headers Iterator': type 'JavaScriptObject' is not a subtype of type 'Iterator0<any>'

I'm getting this error with the new Chrome 117

TypeError: Instance of 'Headers Iterator': type 'JavaScriptObject' is not a subtype of type 'Iterator0<any>'
    at Object.wrapException (chrome-extension://bpjhagkkjkejoamnbkldnahdabfldfao/popup.dart.js:1084:43)
    at Object._failedAsCheck (chrome-extension://bpjhagkkjkejoamnbkldnahdabfldfao/popup.dart.js:2595:15)
    at Rti._generalAsCheckImplementation [as _as] (chrome-extension://bpjhagkkjkejoamnbkldnahdabfldfao/popup.dart.js:2584:9)
    at Rti._installSpecializedAsCheck (chrome-extension://bpjhagkkjkejoamnbkldnahdabfldfao/popup.dart.js:2507:22)
    at Object.HeadersInstanceMembers_entries (chrome-extension://bpjhagkkjkejoamnbkldnahdabfldfao/popup.dart.js:8638:43)
    at chrome-extension://bpjhagkkjkejoamnbkldnahdabfldfao/popup.dart.js:23323:27
    at _wrapJsFunctionForAsync_closure.$protected (chrome-extension://bpjhagkkjkejoamnbkldnahdabfldfao/popup.dart.js:4016:15)
    at _wrapJsFunctionForAsync_closure.call$2 (chrome-extension://bpjhagkkjkejoamnbkldnahdabfldfao/popup.dart.js:14309:12)
    at _awaitOnObject_closure.call$1 (chrome-extension://bpjhagkkjkejoamnbkldnahdabfldfao/popup.dart.js:14297:32)
    at _RootZone.runUnary$2$2 (chrome-extension://bpjhagkkjkejoamnbkldnahdabfldfao/popup.dart.js:16853:18)

If I comment-out these lines it works

fetch_client/lib/src/fetch_client.dart

Lines 157 to 158 in 6631e5b

	for (final header in response.headers.entries())
	header.first: header.last,

It's not triggering all the time, I have to investigate to provide a reproducible example.

Automatically setting persistentConnection to false if request size > 64KiB

Hello!

Thanks for the package, it's really useful.

I've wasted a couple of hours debugging failing requests and they ended up being caused by the fact that the request size was > 64KiB. I did read your 'Large payload' section in the README but it took me a while to realize that that was the problem as the error message was not helpful at all.

I was wondering what would be the downside of automatically setting persistentConnection to false if the request size is > 64KiB?

Something like:

// If the request if bigger than 60KiB set persistentConnection to false
if ((request.contentLength ?? 0) > 61440) {
  request.persistentConnection = false;
}

What do you think?