Add headers to request using Ferry with Flutter

Question

it's my first time using Ferry to make GraphQL requests. My GraphQL Server has some queries that need an HTTP header for authorization.

I need to be able to add the header after initializing the client.

client.dart:

Future<Client> initClient() async {
  await Hive.initFlutter();

  final box = await Hive.openBox<Map<String, dynamic>>("graphql");

  await box.clear();

  final store = HiveStore(box);

  final cache = Cache(store: store);

  final link = HttpLink("example.com/");

  final client = Client(
    link: link,
    cache: cache,
  );

  return client;
}

main.dart:

void main() async{
  final client = await initClient();
  GetIt.I.registerLazySingleton<Client>(() => client);
  runApp(MyApp());
}

request file:

    client.request(Req).listen((response) {
      print(response.graphqlErrors); // It will return an error because theres no header with the token
      print(response.data);
    });

Solution 1

Here is a simple example for adding headers to the Ferry GraphQL client requests. In this example, we add an Authorization Bearer Token to the request.

The headers are added by adding an object to the defaultHeaders parameter on creation of the HttpLink object.

graphql_service.dart

import 'package:ferry/ferry.dart';
import 'package:gql_http_link/gql_http_link.dart';

Client initGqlClient(String url) {
  final link = HttpLink(
    url,
    defaultHeaders: {
      'Authorization':
          'Bearer eyJ0eXAiOi...',
    },
  );

  final client = Client(link: link);

  return client;
}

Solution 2

Try this implementation work for me!

save auth_link.dar from graphql_flutter

Working example

import 'dart:async';

import 'package:ferry/ferry.dart';
import 'package:ferry_hive_store/ferry_hive_store.dart';
import 'package:gql_http_link/gql_http_link.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'path_to/auth_link.dart';
Future<Client> initClient() async {
  final box = await Hive.openBox("graphql");
  await box.clear();
  final store = HiveStore(box);
  final cache = Cache(store: store);
  var httpLink = HttpLink('http://localhost:4000/graphql');
  final AuthLink authLink = AuthLink(
    getToken: () async => await getBoxToken(),
  );

  final Link link = authLink.concat(httpLink);
  final client = Client(
    link: link,
    cache: cache,
  );
  return client;
}

FutureOr<String> getBoxToken() async {
  final box = await Hive.openBox("fireToken");
  return 'Bearer ${box.get('token')}';
}

Comments

[Chirag Bargoojar]

Check this post on their Github which explains how to add a header. github.com/gql-dart/ferry/issues/95 Also an example github.com/gql-dart/gql/blob/…

[Henrique Melo]

@ChiragBargoojar thanks, I don't know if I understood the code correctly but that example won't force to have a token?

[Chirag Bargoojar]

I don't think it will force you to pass token just try it that's the only way to find out.

[Henrique Melo]

Thanks I will try.

[Zennichimaro]

Hi, what if my bearer-token need to change (after refresh) in your case it will need to reconstruct the whole HttpLink and thus the entire Client as well

[Zennichimaro]

I was looking to concat the HttpLink with AuthLink but I can't find where I can import the AuthLink

[Matthew Rideout]

Just an update, I've switched to Artemis which I like better because it decouples the frontend from the backend better, and overall is more flexible, customizable to use cases.