Graphql-flutter: make `graphql/client.dart` web compatible

[micimize]

We've received a handful of complaints about the dart:io dependency, which makes graphql/client.dart incompatible with web:

Important: Browser-based applications can't use this library. Only servers, command-line scripts, and Flutter mobile apps can import and use dart:io.

This should be avoidable.

Current progress and corresponding MR:

• [x] memory persistent #325
• [x] GraphQL upload file #328
• [x] websocket #323

[micimize]

dart:io is used:

• in lib/src/cache/in_memory.dart for persistence
• in lib/src/core/raw_operation_data.dart for File handling
• in lib/src/link/http/link_http.dart for File upload logic
• in lib/src/socket_client.dart for CompressionOptions, WebSocket, and WebSocketStatus

[micimize]

We can probably replace file logic with https://pub.dev/packages/file, but it seems like WebSockets will require some toggle logic between dart:io and dart:html. I think we can do a conditional export

[adelcasse]

Considering Websocket (that's our pain point with @kei42 for now), I've come across this lib https://github.com/dart-lang/web_socket_channel

Maybe a solution would be to use it or take inspiration to wrap both dart:io and dart:html Websocket implementations ?

[micimize]

@adelcasse that's the right direction - maybe something more minimalist, idk much about websockets though. I'm not sure exactly, but I think we can leverage the conditional export to avoid any api differences between the platform (as opposed to shared interface with injection).

It'll probably be a bit before I have the time to get to this

[adelcasse]

beware on conditional export as I think the implementations on io and html are not the same (different methods, ...). @kei42 might confirm as he tried but we have to pull different code conditionally, not only exports

[kei42]

Indeed as far as I've seen there is no "connect" method in dart:html and there are no stream handling either.
To connect on dart:html you just need this line:
WebSocket(url, protocols: protocols);
where as for dart:io
WebSocket.connect(url, protocols: protocols, headers: headers, compression: config.compression);

[micimize]

yeah, we'd need a wrapping/normalizing interface and platform-specific implementations in the style of web_socket_channel. It would also be a great standalone websocket module.

[truongsinh]

@micimize I took the liberty to update your original issue description to include checklist. Hopefully, after merging all 3 PRs, we can run client on browser.

[truongsinh]

All boxes (that we know of) are checked. Maybe the next step is to have an example in Flutter for Web / AngularDart?

[micimize]

@truongsinh that would be ideal, but could be left for another issue. If you, @adelcasse, or @kei42 use/have used it in the wild successfully that's enough for me to close this one.

[kei42]

I'll try it this week if I have time. I'll keep you updated

[TanaseHagi]

Any progress on this?

[micimize]

@TanaseHagi graphql/client.dart should be usable on web today. I left it open while awaiting confirmation, but I think it's better to close it and open a new issue if someone reports problems

[marcgraub]

Hi! Recently I've upgraded to the latest version of graphql.

I think the import of "io_network_exception.dart" on "package:graphql/src/exceptions/exceptions.dart" makes the package incompatible with web projects.

See the related line