transform-graphql-type-annotations

An utility to generate flow or typescript type annotations from GraphQL schema and query.

Works on the client side

This utility is based on apollo-codegen

The online REPL is available at

• https://transform.now.sh/graphql-to-flow
• https://transform.now.sh/graphql-to-typescript

Installation

npm i transform-graphql-type-annotations

Basic Usage

All the restrictions applied by apollo-codegen remain here.

import transform from "transform-graphql-type-annotations"
import { schema, query } from "./tests/data"

// Flow Type Annotations
console.log(tranform(schema, query))

will give

/* @flow */
//  This file was automatically generated and should not be edited.

export type HeroAndFriendsNamesQuery = {|
  hero: ?( {
      __typename: "Human",
      // The name of the character
      name: string,
      // The friends of the character, or an empty list if they have none
      friends: ?Array< ?( {
          __typename: "Human",
          // The name of the character
          name: string,
        } | {
          __typename: "Droid",
          // The name of the character
          name: string,
        }
      ) >,
    } | {
      __typename: "Droid",
      // The name of the character
      name: string,
      // The friends of the character, or an empty list if they have none
      friends: ?Array< ?( {
          __typename: "Human",
          // The name of the character
          name: string,
        } | {
          __typename: "Droid",
          // The name of the character
          name: string,
        }
      ) >,
    }
  ),
|};

export type heroFriendsFragment = ( {
      __typename: "Human",
      // The friends of the character, or an empty list if they have none
      friends: ?Array< ?( {
          __typename: "Human",
          // The name of the character
          name: string,
        } | {
          __typename: "Droid",
          // The name of the character
          name: string,
        }
      ) >,
    } | {
      __typename: "Droid",
      // The friends of the character, or an empty list if they have none
      friends: ?Array< ?( {
          __typename: "Human",
          // The name of the character
          name: string,
        } | {
          __typename: "Droid",
          // The name of the character
          name: string,
        }
      ) >,
    }
  );

API

transform(schema, query, [type])

schema : string

Pass the stringified GraphQL schema. Its a mandatory argument.

query : string

Pass the stringified query. Its a mandatory argument.

type : string

By default this is set to flow. If you want TypeScript type annotations, change this to typescript

Related

• apollo-codegen - Generate API code or type annotations based on a GraphQL schema and query documents

License

MIT @ Ritesh Kumar

Contributors

Thanks goes to these wonderful people (emoji key):

Ritesh Kumar 📖 💻 🤔 👀	Asa Ayers 📖

This project follows the all-contributors specification. Contributions of any kind welcome!