simple-graphql-to-typescript

Simple-graphql-to-typescript generator

🚀 🔄 Simple Typescript interface generator from a GraphQL api schemas or URL

Any help for writing test or adding options is greatly welcomed! 😁

Usage

Refer to the full documentation !

New in 0.10.12

Added apolloVersion option.

Installation

For global use

npm i -g simple-graphql-to-typescript
#or
yarn global add simple-graphql-to-typescript

For local use

npm i simple-graphql-to-typescript --save-dev
#or
yarn add -D simple-graphql-to-typescript

Quick Exemples

With generated, fully-typed and abortable Apollo handlers, and generated fragments

sgts -e https://graphql.anilist.co/ -o ./generated.ts --codegen-functions --gen-fragments

import { apiProvider } from './generated.ts';
import { ApolloClient } from '@apollo/client/core';

const sgts = apiProvider(
  new ApolloClient({ uri: 'https://graphql.anilist.co/', cache: new InMemoryCache() })
);
// Declare the main api source with your ApolloClient constructor

const mediaListQuery = sgts.MediaList().$args({ sort: [MediaListSort.Added_time] });

// You can still add fallback fragment by passing it to the first method
// `sgts.MediaList(`id status`)...`
// Or
// `sgts.MediaList(gql`fragment MediaListFragment on MediaList { ... }`)...`

const mediaList = await mediaListQuery.$fetch();
console.log(mediaList);

mediaListQuery.$abort();
// You can abort the query anytime

With only GraphQL types transpiled to Typescript interfaces

sgts -e https://graphql.anilist.co/ -o ./generated.ts

Part of the generated output:

...

/** A user's general options */
export interface UserOptions {
  /** The language the user wants to see media titles in*/
  titleLanguage: Maybe<UserTitleLanguage>;
  /** Whether the user has enabled viewing of 18+ content*/
  displayAdultContent: Maybe<boolean>;
  /** Whether the user receives notifications when a show they are watching aires*/
  airingNotifications: Maybe<boolean>;
  /** Profile highlight color (blue, purple, pink, orange, red, green, gray)*/
  profileColor: Maybe<string>;
  /** Notification options*/
  notificationOptions: Maybe<NotificationOption[]>;
  /** The user's timezone offset (Auth user only)*/
  timezone: Maybe<string>;
  /** Minutes between activity for them to be merged together. 0 is Never, Above 2 weeks (20160 mins) is Always.*/
  activityMergeTime: Maybe<number>;
}

/** The language the user wants to see media titles in */
export enum UserTitleLanguage {
  Romaji = 'ROMAJI',
  English = 'ENGLISH',
  Native = 'NATIVE',
  Romaji_stylised = 'ROMAJI_STYLISED',
  English_stylised = 'ENGLISH_STYLISED',
  Native_stylised = 'NATIVE_STYLISED',
}
...

Help

sgts -h

Options

Option	Short syntax	Type	Usage
--endpoint <endpoint>	-e	string(url)	See doc
--json <path to json>	-j	string(path)	See doc
--output <path>	-o	string(path) default ./generated.ts	See doc
--codegen-functions		boolean	See doc
--codegen-react-hooks		boolean	See doc
--codegen-vue-hooks		boolean	See doc
--gen-fragments		boolean	See doc
--codegen-templates		boolean	See doc
--apolloVersion		number default 3	See doc
--customScalars <scalars>		{"myScalar": "MyType"}	See doc
--prefix <prefix>	-p	string default null	See doc
--suffix <suffix>	-s	string default null	See doc
--header <header>		string default null	See doc
--compileToJs		boolean	See doc
--download	-D	string default null	See doc
generate		string default development	See doc
init			See doc

Roadmap

I don't have much free time to develop feature I don't use, but feel free to send a PR!

• [x] Export only Gql string
• [x] Removed Query and mutation name in Apollo Hooks data
• [x] Config file .sgtsrc.js
• [x] Support Subscriptions for codegen-react-hooks
• [x] Support Subscriptions for codegen-vue-hooks
• [x] Support Subscriptions for codegen-template
• [ ] Support Subscriptions for codegen-functions
• [ ] Support UseLazyQuery Apollo Hook

In Progress

• [ ] Highlight new generated, modified or deleted types in terminal

License

MIT

Victor Garcia