flutter_graphql_hooks

An alpha implementation of an Apollo like GraphQL Hooks interface powered by artemis and graphql_flutter for typed queries.

Features

  • useQuery

    • refetch, pollInterval and fetchMore working
    • completely Typed
  • useMutation

    • completely Typed
  • multiple GraphQL Providers through optional (provider Argument)

Getting Started

  1. Follow the artemis documentation to use the build_runner in order to create your typed Queries in your directory
  2. Wrap your Application in GraphQLHookProvider
  3. Use useQuery and useMutation together with your generated GraphQLQuerys in your HookWidgets

Example Setup

A Detail Query in a directory that is monitored by Artemis


query MySpecial($id: ID!) {
    nested {
        typed_as_string
    }
}

The Code in your Application (after a build run)

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter_graphql_hooks/provider.dart';
import 'package:flutter_graphql_hooks/hooks.dart';
import 'package:your_package/GENERATED_API_POINT.dart';


void main() async {
  await initHiveForFlutter();
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TestApp',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  GraphQLHookProvider(
        child: TestWidget(),
        clientBuilder: () {
          Link link = HttpLink(
            "http://your_end_point/graphql",
          );

          return GraphQLClient(
            cache: GraphQLCache(store: HiveStore()),
            link: link,
          );
        });
  }
}

class TestWidget extends HookWidget {
  const TestWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var result = useQuery(MySpecialQuery(variables: MySpecialQueryArguments(id: "1")));

    if (result.data != null) {
      return Text(result.data.nested.typed_as_string);
    }

    return Text("Loading");
  }
}

Documentation and Testing

Is lacking.

Contributing

Happy to accept any pull-request in this alpha stage.

Roadmap

  • useSubscription

Libraries

flutter_graphql_hooks
hooks
provider