graphql

GraphQL Client

Installation

First, depend on this package:

dependencies:
  graphql: ^2.0.0

And then import it inside your dart code:

import 'package:graphql/client.dart';

Usage

To connect to a GraphQL Server, we first need to create a GraphQLClient. A GraphQLClient requires both a cache and a link to be initialized.

In our example below, we will be using the Github Public API. In our example below, we are going to use HttpLink which we will concatinate with AuthLink so as to attach our github access token. For the cache, we are going to use InMemoryCache.

...

final HttpLink _httpLink = HttpLink(
    uri: 'https://api.github.com/graphql',
);

final AuthLink _authLink = AuthLink(
    getToken: () async => 'Bearer $YOUR_PERSONAL_ACCESS_TOKEN',
);

final Link _link = _authLink.concat(_httpLink);

final GraphQLClient _client = GraphQLClient(
        cache: InMemoryCache(),
        link: _link,
    );

...

Once you have initialized a client, you can run queries and mutations.

Query

Creating a query is as simple as creating a multiline string:

const String readRepositories = r'''
  query ReadRepositories($nRepositories: Int!) {
    viewer {
      repositories(last: $nRepositories) {
        nodes {
          __typename
          id
          name
          viewerHasStarred
        }
      }
    }
  }
''';

Then create a QueryOptions object with the query string as the document and pass any variables necessary.

In our case, we need pass nRepositories variable and the document name is readRepositories.

const int nRepositories = 50;

final QueryOptions options = QueryOptions(
    document: readRepositories,
    variables: <String, dynamic>{
        'nRepositories': nRepositories,
    },
);

And finally you can send the query to the server and await the response:

...

final QueryResult result = await _client.query(options);

if (result.hasErrors) {
    print(result.errors);
}

final List<dynamic> repositories =
    result.data['viewer']['repositories']['nodes'] as List<dynamic>;

...

Mutations

Creating a Mutation is also similar to creating a query, with a small difference. First, start with a multiline string:

const String addStar = r'''
  mutation AddStar($starrableId: ID!) {
    action: addStar(input: {starrableId: $starrableId}) {
      starrable {
        viewerHasStarred
      }
    }
  }
''';

Then instead of the QueryOptions, for mutations we will MutationOptions, which is where we pass our mutation and id of the repository we are starring.

...

final MutationOptions options = MutationOptions(
  document: addStar,
  variables: <String, dynamic>{
    'starrableId': repositoryID,
  },
);

...

And finally you can send the query to the server and await the response:

...

final QueryResult result = await _client.mutate(options);

if (result.hasErrors) {
  print(result.errors);
  return;
}

final bool isStarrred =
    result.data['action']['starrable']['viewerHasStarred'] as bool;

if (isStarrred) {
  print('Thanks for your star!');
  return;
}

...