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

Overview

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

How to use

Install

npm i graphql-codegen-flutter-artemis-hooks

Edit codegen.yml

Please specify path to the file generated by artemis

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

query ExampleQuery {
  objects {
    id
    name
  }
}

mutation TestMutation($variable: String!) {
  testMutation(variable: $variable) {
    result
  }
}

and using this plugin would generate code like this.

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<DataType>(BuildContext context, DocumentNode query,
    [Map<String, dynamic>? variables]) {
  final client = GraphQLProvider.of(context).value;
  final state =
      useState<QueryResult>(QueryResult(source: QueryResultSource.network));

  useEffect(() {
    late Future<QueryResult> 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<DataType>(BuildContext context) {
  final result = useQuery<ExampleQuery$Query>(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<DataType>(BuildContext context, TestMutationArguments variables) {
  final result = useQuery<TestMutation$Mutation>(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.

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
You might also like...

A simple easy-to-use database, built for beginners.

A simple easy-to-use database, built for beginners.

ByteDatabase: Built for Beginners Table of Content Features Installation Changelog Quick Examples Contributors Features Persistent Storage: Data store

Nov 20, 2022

Fast File is a quick and easy-to-use library to convert data sources to a variety of options.

Fast File is a quick and easy-to-use library to convert data sources to a variety of options.

Fast File Converter The Express.js's Fast File Converter Library Fast File Converter Library is a quick and easy-to-use library to convert data source

Nov 16, 2022

Execute one command (or mount one Node.js middleware) and get an instant high-performance GraphQL API for your PostgreSQL database!

Execute one command (or mount one Node.js middleware) and get an instant high-performance GraphQL API for your PostgreSQL database!

PostGraphile Instant lightning-fast GraphQL API backed primarily by your PostgreSQL database. Highly customisable and extensible thanks to incredibly

Jan 4, 2023

Conjure SQL from GraphQL queries 🧙🔮✨

Conjure SQL from GraphQL queries 🧙🔮✨

Sqlmancer Conjure SQL from your GraphQL queries 🧙 🔮 ✨ ⚠️ This project is currently on hiatus. I am hoping to resume working on Sqlmancer once I have

Oct 30, 2022

Application made to show the basic concepts of GraphQL with Apollo Server

graphql-insta-example Application made to show the basic concepts of GraphQL with Apollo Server. Getting Started Run npm install Run npm run dev Go to

Aug 26, 2022

Learn GraphQL PIAIC CNC Class code

GraphQL using React! Steps (for 01 - react-graphql) Generate and copy Access Token from Github Personal Acess Token Create .env file in project folder

Jan 2, 2023

Código desenvolvido na mentoria do Hiring Coders utilizando Express e GraphQL

hiringcoders-graphql Código desenvolvido na mentoria do Hiring Coders utilizando Express e GraphQL Contribuições A ideia do repositório é continuar si

Dec 29, 2022

A lightweight way to cache on graphQL servers

A lightweight way to cache on graphQL servers

cacheflowQL What is cacheflowQL? CacheflowQL is an npm package with complex caching algorithms that provide developers deep insights into their GraphQ

Nov 16, 2022

A template for WebSockets powered Cloudflare Worker project using graphql-ws

🚡 graphql-ws on Cloudflare Workers A template for WebSockets powered Cloudflare Worker project using graphql-ws. The worker serves the following rout

Dec 18, 2022
Comments
  • Configure Renovate

    Configure Renovate

    Mend Renovate

    Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

    🚦 To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.


    Detected Package Files

    • example/package.json (npm)
    • package.json (npm)

    Configuration

    🔡 Renovate has detected a custom config for this PR. Feel free to ask for help if you have any doubts and would like it reviewed.

    Important: Now that this branch is edited, Renovate can't rebase it from the base branch any more. If you make changes to the base branch that could impact this onboarding PR, please merge them manually.

    What to Expect

    With your current configuration, Renovate will create 10 Pull Requests:

    Update dependency ts-jest to v27.1.5
    • Schedule: ["at any time"]
    • Branch name: renovate/ts-jest-27.x
    • Merge into: master
    • Upgrade ts-jest to 27.1.5
    Update dependency @​types/node to v16.18.3
    • Schedule: ["at any time"]
    • Branch name: renovate/node-16.x
    • Merge into: master
    • Upgrade @types/node to 16.18.3
    Update dependency jest to v27.5.1
    • Schedule: ["at any time"]
    • Branch name: renovate/jest-monorepo
    • Merge into: master
    • Upgrade jest to 27.5.1
    Update dependency standard-version to v9.5.0
    • Schedule: ["at any time"]
    • Branch name: renovate/standard-version-9.x
    • Merge into: master
    • Upgrade standard-version to 9.5.0
    Update dependency typescript to v4.9.3
    • Schedule: ["at any time"]
    • Branch name: renovate/typescript-4.x
    • Merge into: master
    • Upgrade typescript to 4.9.3
    Update graphqlcodegenerator monorepo
    Update dependency @​types/node to v18
    • Schedule: ["at any time"]
    • Branch name: renovate/node-18.x
    • Merge into: master
    • Upgrade @types/node to 18.11.9
    Update dependency auto-bind to v5
    • Schedule: ["at any time"]
    • Branch name: renovate/auto-bind-5.x
    • Merge into: master
    • Upgrade auto-bind to ~5.0.0
    Update dependency graphql to v16
    • Schedule: ["at any time"]
    • Branch name: renovate/graphql-16.x
    • Merge into: master
    • Upgrade graphql to ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
    • Upgrade graphql to 16.6.0
    Update jest monorepo to v29 (major)
    • Schedule: ["at any time"]
    • Branch name: renovate/major-jest-monorepo
    • Merge into: master
    • Upgrade @types/jest to 29.2.3
    • Upgrade jest to 29.3.1
    • Upgrade ts-jest to 29.0.3

    🚸 Branch creation will be limited to maximum 2 per hour, so it doesn't swamp any CI resources or spam the project. See docs for prhourlylimit for details.


    ❓ Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.


    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
Owner
seya
seya
Lovefield is a relational database for web apps. Written in JavaScript, works cross-browser. Provides SQL-like APIs that are fast, safe, and easy to use.

Lovefield Lovefield is a relational database written in pure JavaScript. It provides SQL-like syntax and works cross-browser (currently supporting Chr

Google 6.8k Jan 3, 2023
curl for GraphQL with autocomplete, subscriptions and GraphiQL. Also a dead-simple universal javascript GraphQL client.

graphqurl graphqurl is a curl like CLI for GraphQL. It's features include: CLI for making GraphQL queries. It also provisions queries with autocomplet

Hasura 3.2k Jan 3, 2023
GraphQL Fastify Server is an implementation of GraphQL.

GraphQL Fastify Server Installation Usage Using cache Middlewares Liveness & Readiness Contributing License Installation npm install --save graphql-fa

Rui Silva 33 Dec 19, 2022
Very easy graphQL example made by Bobby Chao

Very easy graphQL example made by Bobby Chao. The folder has been organized, the module has been split, and it can be directly used as a development scratch. It using graphQL + node.js + express, and MySQL as datasource.

Bobby Chao 4 Sep 18, 2022
Workshop to illustrate how to use GraphQL

?? Netflix Clone using Astra DB and GraphQL 50 minutes, Intermediate, Start Building A simple ReactJS Netflix homepage clone running on Astra DB that

DataStax Developers 606 Jan 4, 2023
Burger builder project using React, Hooks and Context API.

Burger Builder In this project, I made a context-api project by creating hamburgers with 3 different materials. Project setup npm install Project star

Efecan Pınar 4 Jun 17, 2021
An easy-to-use multi SQL dialect ORM tool for Node.js

Sequelize Sequelize is a promise-based Node.js ORM tool for Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server. It features solid transaction s

Sequelize 27.3k Jan 4, 2023
A proposal to add modern, easy to use binary encoders to the web platform.

proposal-binary-encoding A proposal to add modern, easy to use binary encoders to the web platform. This is proposed as an addition to the HTML spec,

Luca Casonato 35 Nov 27, 2022
An easy-to-use discord bot including database, slash commands and context menus !

Discord Bot Template An easy-to-use discord bot using Discord.JS V13. Wiki Includes: Slash commands Database User commands and more in future Requirem

Gonz 108 Dec 28, 2022
⛰ "core" is the core component package of vodyani, providing easy-to-use methods and AOP implementations.

Vodyani core ⛰ "core" is the core component package of vodyani, providing easy-to-use methods and AOP implementations. Installation npm install @vodya

Vodyani 25 Oct 18, 2022