https://github.com/kazuyaseki/graphql-codegen-flutter-artemis-hooks

graphql-codegen plugin to generate type-safe, easy-to use hooks for Flutter
https://github.com/kazuyaseki/graphql-codegen-flutter-artemis-hooks

artemis flutter graphql graphql-codegen

Last synced: 14 days ago
JSON representation

graphql-codegen plugin to generate type-safe, easy-to use hooks for Flutter

• Host: GitHub
• URL: https://github.com/kazuyaseki/graphql-codegen-flutter-artemis-hooks
• Owner: kazuyaseki
• Created: 2021-12-17T17:25:58.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T17:28:08.000Z (11 months ago)
• Last Synced: 2024-10-19T12:18:11.479Z (23 days ago)
• Topics: artemis, flutter, graphql, graphql-codegen
• Language: TypeScript
• Homepage:
• Size: 161 KB
• Stars: 18
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# graphql-codegen-flutter-artemis-hooks

This is graphql-codegen plugin to generate type-safe, easy-to use Flutter artemis hooks.

For further detail, see "What it generates" section.

## Prerequisite

This plugin assumes that you use the following packages

- [flutter_hooks](https://pub.dev/packages/flutter_hooks)

- [graphql_flutter](https://pub.dev/packages/graphql_flutter)

- [artemis](https://pub.dev/packages/artemis)

## How to use

### Install

```bash

npm i graphql-codegen-flutter-artemis-hooks

```

### Edit codegen.yml

Please specify path to the file generated by artemis

```yml

schema: your_schema_file.graphql

documents: './your_project/**/*.graphql'

generates:

  your_project/generated_hooks.dart:

    config:

      artemisImportPath: package:your_project/your_artemis_generated/graphql_api.dart

    plugins:

      - graphql-codegen-flutter-artemis-hooks

```

then run the codegens!!

## What it generates

for instance, if you have defined GraphQL as following

```graphql

query ExampleQuery {

  objects {

    id

    name

  }

}

mutation TestMutation($variable: String!) {

  testMutation(variable: $variable) {

    result

  }

}

```

and using this plugin would generate code like this.

```dart

import 'package:flutter/material.dart';

import 'package:flutter_hooks/flutter_hooks.dart';

import 'package:graphql_flutter/graphql_flutter.dart';

import 'package:gql/ast.dart';

import 'package:your_project/your_artemis_generated/graphql_api.dart';

QueryResult useQuery(BuildContext context, DocumentNode query,

    [Map? variables]) {

  final client = GraphQLProvider.of(context).value;

  final state =

      useState(QueryResult(source: QueryResultSource.network));

  useEffect(() {

    late Future promise;

    if (variables != null) {

      promise = client.query(

        QueryOptions(document: query, variables: variables),

      );

    } else {

      promise = client.query(

        QueryOptions(document: query),

      );

    }

    promise.then((result) {

      state.value = result;

    });

    return () {};

  }, []);

  return state.value;

}

class ExampleQuery$QueryReturnType {

  bool isLoading;

  OperationException? exception;

  ExampleQuery$Query? data;

  ExampleQuery$QueryReturnType(this.isLoading, this.exception, this.data);

}

ExampleQuery$QueryReturnType useExampleQueryQuery(BuildContext context) {

  final result = useQuery(context, EXAMPLE_QUERY_QUERY_DOCUMENT);

  return ExampleQuery$QueryReturnType(result.isLoading, result.exception, result.data == null ? null : ExampleQuery$Query.fromJson(result.data!));

}

class TestMutation$MutationReturnType {

  bool isLoading;

  OperationException? exception;

  TestMutation$Mutation? data;

  TestMutation$MutationReturnType(this.isLoading, this.exception, this.data);

}

TestMutation$MutationReturnType useTestMutationQuery(BuildContext context, TestMutationArguments variables) {

  final result = useQuery(context, TEST_MUTATION_MUTATION_DOCUMENT, variables.toJson());

  return TestMutation$MutationReturnType(result.isLoading, result.exception, result.data == null ? null : TestMutation$Mutation.fromJson(result.data!));

}

```

Then you can use the generated type-safe hooks as following.

```dart

class PageWidget extends HookWidget {

  const PageWidget({Key key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    final queryResult = useExampleQueryQuery(context);

    final mutationResult = useTestMutationQuery(context, TestMutationArguments(variable: ""));

    return ...

  }

}

```

## Configuration

- `artemisImportPath`: path to your generated file by artemis

- `isNonNullSafety` (default: null): set this to `true` if you want to generate code that is not null safety