Add typescript type graphql plugin

[borremosch]

This is a plugin that generates type-graphql types, loosely based on the typescript plugin. See PR #2173 for more details.

[dotansimha]

Hi @borremosch , can you please rebase this PR?

[dotansimha]

Thank you @borremosch !!!

[rsaenen]

Can we have a bit of documentation ?
This plugin seems to be very helpfull

[borremosch]

You can find the documentation on the graphql-codegen website here. Also, if you need some more information about the use cases of this plugin, I have written a two part article about how I am using it:

• Type safety in microservices using GraphQL and TypeScript part I: backend and frontend
• Type safety in microservices using GraphQL and TypeScript part II: GraphQL schema combination

@dotansimha it seems that the link to the TypeGraphQL plugin documentation is missing from the menu on the website. Do I need to make a new pull request to include it?

[rsaenen]

Thanks for this fast reply!

Following your documentation and articles, this plugin provides class for ObjectType with the configuration :

config:
    declarationKind:
        type: 'class'
        input: 'class'

But InputType is still a type, is this the expected behavior?

[borremosch]

Hmm I had not considered the case where you would want to reuse your input types.. I guess this could be added in a next release

[digeomel]

Hello, thanks for the great work on this, but I'm facing a problem with interfaces. When I set:

config:
  declarationKind: 'interface'

All my interface properties are separated by commas, as if they were types, but they should be separated by semicolons instead.
Am I missing something?

[ardatan]

@digeomel This plugin is for TypeGraphQL so it uses classes and decorators. Could you explain why you generate interfaces with this plugin?

[digeomel]

@ardatan because I need to have interfaces for my models, not types, and I didn't find another way to do it without this plugin.

[borremosch]

@digeomel it does not seem to be possible to use TypeGraphQL annotations with interfaces. Even if the plugin would generate properly formatter interfaces, the decorators will yield errors. If all you need is to generate interfaces, you can use the @graphql-codegen/typescript plugin for this.

[digeomel]

@borremosch can you please explain how to use the @graphql-codegen/typescript plugin to generate interfaces instead of the classes which is the default? I didn't find any switch/flag in the plugin documentation to allow me to generate interfaces.

[borremosch]

@digeomel it works the exact same way as with @graphql-codegen/typescript-type-graphql, since this plugin actually extends @graphql-codegen/typescript. You can view the documentation here: https://graphql-code-generator.com/docs/plugins/typescript#declarationkind-declarationkindconfig

[digeomel]

@borremosch thanks for the quick reply. I don't see what I'm doing wrong here, this is (part of) my config:

generates:
  ./src/app/core/graphql/fragment-types.json:
    plugins:
      - fragment-matcher
  ./src/app/core/graphql/models.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-apollo-angular
    config:
      declarationKind: 'interface'

What am I doing wrong?

[groege]

Hey,
This is awesome, exactly what I've been looking for BUT it doesn't work for my schema:
Example:

@TypeGraphQL.InputType()
export class FilterTransportAddressType {
//TypeGraphQL.TransportAddressColumnValues ==> seems like we'd need to solve custom scalar types
  @TypeGraphQL.Field(type => TypeGraphQL.TransportAddressColumnValues, { nullable: true })
  field!: Maybe<Scalars['TransportAddressColumnValues']>;

  @TypeGraphQL.Field(type => FilterOperator, { nullable: true })
  operator!: Maybe<FilterOperator>;

  @TypeGraphQL.Field(type => TypeGraphQL.ID, { nullable: true })
  value!: Maybe<Scalars['ID']>;

//Maybe is a type, should be removed ==>
//@TypeGraphQL.Field(type => [FilterTransportAddressType], { nullable: true })
  @TypeGraphQL.Field(type => [Maybe<FilterTransportAddressType>], { nullable: true })
  filters!: Maybe<Array<Maybe<FilterTransportAddressType>>>;

  @TypeGraphQL.Field(type => FilterCompositionLogicalOperator, { nullable: true })
  logic!: Maybe<FilterCompositionLogicalOperator>;
};

[borremosch]

Hey @groege, could this by any chance be fixed by #2757? In that case you'll have to wait for a new version of graphql-codegen, as the pull request has been accepted only 2 days ago.

[groege]

@borremosch
Thanks!
Although I'm not sure it will fix the "Maybe" problem... but will try it out
Do you know how often new npm packages are being released and/or there is a pre release?

[borremosch]

@groege new versions are released regularly (releases page is here).

[dotansimha]

@borremosch is right ;)
Also, we have automatic alpha release for every git commit, the latest is: 1.8.2-alpha-6ee6e064.78. @groege

[groege]

Thanks @borremosch @dotansimha!
Though if you have something like this (tested with 1.8.2-alpha-6ee6e064.78 ):

type MyType{
  myProperty: [SomeOtherType]
}

Will result in:

@TypeGraphQL.Field(type => \[**Maybe**\<SomeOtherType>], { nullable: true })
myProperty!: Maybe<Array<Maybe\<SomeOtherType>>>;

So ts will say: 'Maybe' only refers to a type, but is being used as a value here.

[dotansimha]

@groege if it's still relevant, can you please open an issue with a reproduction?

[sibeliuz]

Still generates commas in interfaces and linter says: "Properties should be separated by semicolons"

[smfoisal]

Still generates commas in interfaces and linter says: "Properties should be separated by semicolons"

Hi @digeomel, have you found a solution for the comma issue? I'm also facing this issue.

[maltenz]

@smfoisal
I ended up downgrading to v1.12.2 and that worked for me

[dotansimha]

@sibeliuz @smfoisal @maltenz can you please share a reproduction for this with the latest codegen version? we'll try to fix that.

[digeomel]

@smfoisal sorry, just saw your comment, no, I didn't, finally gave up and we're just writing our own interfaces, duplicating code... 😞

[leejh3224]

@groege @dotansimha @borremosch

IMO, the reason for an error 'Maybe' only refers to a type, but is being used as a value here. is because of using Maybe which is a type as Field decorator return value.

So I think we can fix this simply by checking whether the type is a Maybe and strip Maybe<...> part out of it.

// packages/plugins/typescript/type-graphql/src/visitor.ts: line 248
const maybeType = type.type.match(MAYBE_REGEX)

let arrayReturnType = `[${type.type}]`

if (maybeType) {
 const [,typeNameWithoutMaybe] = maybeType
 arrayReturnType = `[${typeNameWithoutMaybe}]`
}

const decorator =
 '\n' +
 indent(
   `@TypeGraphQL.${fieldDecorator}(type => ${type.isArray ? arrayReturnType : type.type}${
      type.isNullable ? ', { nullable: true }' : ''
   })`
) +
'\n';

If you have a better idea, just let me know and I made PR for this.