[OUTDATED] use SocketClientConfig.connect instead. old work around to headers for graphql flutter

websocket_link_w_headers.dart

import 'package:graphql/client.dart';
import 'dart:io' as io;
import 'package:websocket/websocket.dart' as _ws;

/// Custom version of [WebSocketLink] that connects with the given headers
class WSLink extends Link {
  /// Creates a new [WebSocketLink] instance with the specified config.
  WSLink(
    this.url, {
    this.config = const SocketClientConfig(),
    this.headers,
  });

  final String url;
  final SocketClientConfig config;

  final Map<String, dynamic> headers;

  // cannot be final because we're changing the instance upon a header change.
  SocketClient _socketClient;

  @override
  Stream<Response> request(Request request, [forward]) async* {
    if (_socketClient == null) {
      connectOrReconnect();
    }

    yield* _socketClient.subscribe(request, true);
  }

  /// Connects or reconnects to the server with the specified headers.
  void connectOrReconnect() {
    _socketClient?.dispose();
    _socketClient = SocketClient(
      url,
      config: config,
      connect: (url, {protocols}) => _WebSocket.connect(
        url,
        protocols: protocols,
        headers: headers,
      ),
    );
  }

  /// Disposes the underlying socket client explicitly. Only use this, if you want to disconnect from
  /// the current server in favour of another one. If that's the case, create a new [WebSocketLink] instance.
  Future<void> dispose() async {
    await _socketClient?.dispose();
    _socketClient = null;
  }
}

class _WebSocket implements _ws.WebSocket {
  io.WebSocket _socket;

  _WebSocket._(this._socket);

  static Future<_WebSocket> connect(
    String url, {
    Iterable<String> protocols,
    Map<String, dynamic> headers,
  }) async {
    return _WebSocket._(await io.WebSocket.connect(
      url,
      protocols: protocols,
      headers: headers,
    ));
  }

  @override
  void add(/*String|List<int>*/ data) => _socket.add(data);

  @override
  Future addStream(Stream stream) => _socket.addStream(stream);

  @override
  void addUtf8Text(List<int> bytes) => _socket.addUtf8Text(bytes);

  @override
  Future close([int code, String reason]) => _socket.close(code, reason);

  @override
  int get closeCode => _socket.closeCode;

  @override
  String get closeReason => _socket.closeReason;

  @override
  String get extensions => _socket.extensions;

  @override
  String get protocol => _socket.protocol;

  @override
  int get readyState => _socket.readyState;

  @override
  Future get done => _socket.done;

  Stream _stream;

  @override
  Stream<dynamic /*String|List<int>*/ > get stream =>
      _stream ??= _socket.asBroadcastStream();
}

I love this workaround. any idea on how to make it work with ^5.0.0-nullsafety.2?

@kateile As of 4.1.0-beta.1 you should be able to just pass a custom connect wrapper to the SocketClientConfig:

To supply custom headers to an IO client:

connect: (url, protocols) =>
  IOWebSocketChannel.connect(url, protocols: protocols, headers: myCustomHeaders)

I am using 4.1.0-beta.1 along with gql_dio_link:^0.0.4 and dio: 3.0.10 and everything is fine. Dio 4 introduce some major fix for web and options for more secure cookies storage, and we uses session/cookies based auth. So migrating to dio 4 and latest gql_dio_link seems inevitable to me. Now the problem I am facing is turning this to work with ^5.0.0-nullsafety.2 because using 4.1.0-beta.1 seems incompatible with(I get solving version failed) other latest gql-dart dependencies. And version 5.0.0 uses different web socket package. My problem is I wish to upgrade packages but upgrading will break web socket since I can't pass headers.

@kateile I admit I didn't read all that but gql_dio_link's been migrated to nullsafe+v4 so hopefully that will solve your issue.

I still face some issues. Please see my comment here

I did some little mistakes and I finally solved. Thank you so much

good to hear 👍

how do i apply this solustion to WSclient ?

final WSLink _webSocketLink = WSLink('ws://IP_ADDRESS/graphql',
config: SocketClientConfig(
autoReconnect: true,
inactivityTimeout: null,
),
headers: {"authorization": "exampletoken"});

final Link _link = _webSocketLink;
final GraphQLClient _client = GraphQLClient(
link: _link,
cache: GraphQLCache(),
);

i did try but still unable to connect
any idea @kateile?

please help

@dunods Use SocketClientConfig.connect – this is outdated and probably won't work now

@micimize .. im using the old version graphql_flutter: ^4.0.0 and still yet that code didnt work out.. any idea how to make it work

probably some dev environment setup issue, but I really recommend upgrading at least to 4.1.0-beta.1.

I no longer contribute to graphql_flutter so I don't have the details fresh in my head anymore