Type-graphql: JavaScript support

[MichalLytek]

The main goal of TypeGraphQL is to get rid of SDL schema and TS interfaces duplication in favor of one single source of truth (classes with decorators). However, after adding new features like dependency injection, validation, authorization and subscriptions, there are some benefits of using this library instead of pure graphql-js or graph-tools.

Technically, it would be possible to use TypeGraphQL with babel's transform-class-properties and transform-decorators-legacy plugins and some modification in decorators signature and logic.

It also would be nice to support TypeScript compilation with Babel 7 using @babel/preset-typescript and a bunch of decorators/metadata plugins.

However I'm not sure if there's a demand for this feature.
So if you are interested, please 👍 so I will know that I should implement it 😉

[capaj]

I am thinking about doing this as a POC for babel myself. We're currently starting to migrate our REST api to GQL and babel enabled version would save us a some code repetition. Although benefits such as typechecking in development get lost. I am as unsure :thinking:

[MichalLytek]

Little update: I've tried transform-decorators-legacy and looks like it doesn't support methods params decorators, so it doesn't evaluate @Arg or @Root decorators.

If someone knows how to make this work, please let me know 😉
Otherwise we will have to wait for a new decorators proposal:
https://github.com/tc39/proposal-decorators

When TypeScript supports the new syntax, I will update TypeGraphQL for it and it should work with new babel plugin.

[capaj]

@19majkel94 I've converted our whole app from flowtype to typescript in the end, so I don't really care anymore. Thanks for following through on this anyway!

[ematipico]

I am interested at this topic. Now that Babel supports typescript, I'm more keen to use Babel as compiler and use typescript as just type checker. Although I hit a bump and this cannot be done at moment.

I was wondering if there was, at moment, an alternative way to use decorators like @Arg or @Root?

[MichalLytek]

and use typescript as just type checker

So no reflection from TypeScript compiler? Doesn't sound like a good idea. Why babel for a node app?

I was wondering if there was, at moment, an alternative way to use decorators like @Arg or @Root?

Just call it as a function below your class definition:

Arg("argName", type => ArgType, { nullable: true })(ObjectTypeClass.prototype, "methodName", parameterIndex)

[vjpr]

@ematipico Use @babel/preset-typescript and this plugin https://github.com/leonardfactory/babel-plugin-transform-typescript-metadata

[tzarger]

@vjpr can you share more details how you were able to get this to work with babel-loader? Are you using @Args() or @Ctx()?

[herreraemanuel]

I was working on an example using type-graphql with next.js and I had an issue when I add the @Args(). I used the babel plugin who @vjpr recommended and solve the problem. This is my .babelrc config if someone needed.

json{ "presets": ["next/babel"], "plugins": [ "babel-plugin-transform-typescript-metadata", ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose": true }], "babel-plugin-parameter-decorator" ] }

[PabloSzx]

I was working on an example using type-graphql with next.js and I had an issue when I add the @Args(). I used the babel plugin who @vjpr recommended and solve the problem. This is my .babelrc config if someone needed.

  "presets": ["next/babel"],
  "plugins": [
    "babel-plugin-transform-typescript-metadata",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "babel-plugin-parameter-decorator"
  ]
}

Nope, it doesn't work 😞

[PabloSzx]

I was working on an example using type-graphql with next.js and I had an issue when I add the @Args(). I used the babel plugin who @vjpr recommended and solve the problem. This is my .babelrc config if someone needed.

  "presets": ["next/babel"],
  "plugins": [
    "babel-plugin-transform-typescript-metadata",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "babel-plugin-parameter-decorator"
  ]
}

Did you try to do it?
I make something simular and works 100% ok, but I have typeORM issues

I did exactly the same config, and testing it with a rather large real API and it didn't work 😢

[aleccool213]

Getting the original error with this .babelrc in my Next.js app:

{
  "presets": ["next/babel"],
  "plugins": [
    "babel-plugin-transform-typescript-metadata",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "babel-plugin-parameter-decorator"
  ]
}

Code:

import { Arg, Authorized, Query, Resolver } from "type-graphql";

import { UserService } from "../../services/user/user.service";

import { UserNotFoundError } from "./user.error";
import { User } from "./user.type";

@Resolver(User)
export class UserResolver {
  constructor(private userService: UserService) {}

  @Query(() => User)
  @Authorized()
  async recipe(@Arg("id") id: string) {
    const recipe = await this.userService.findById(id);
    if (recipe === undefined) {
      throw new UserNotFoundError(id);
    }
    return recipe;
  }
}

Error:

error - ./pages/api/lib/features/user/user.resolver.ts:14:15
Syntax error: Decorators cannot be used to decorate parameters

  12 |   @Query(() => User)
  13 |   @Authorized()
> 14 |   async recipe(@Arg("id") id: string) {
     |                ^
  15 |     const recipe = await this.userService.findById(id);
  16 |     if (recipe === undefined) {
  17 |       throw new UserNotFoundError(id);

[vjpr]

Here is what my babel preset looks like:

NOTE: I had to patch parameter decorator to work with React@17.

module.exports = api => {
  return {

    ////////////////////////////////////////////////////////////////////////////

    presets: [
      require('@babel/preset-typescript'),
    ],

    ////////////////////////////////////////////////////////////////////////////

    plugins: [
      // Decorators must be before `class-properties`.
      [require('@babel/plugin-proposal-decorators'), {legacy: true}],

      ////////////////////

      // Patched to fix: https://github.com/WarnerHooh/babel-plugin-parameter-decorator/issues/25
      [require('@vjpr/babel-plugin-parameter-decorator')],

      ////////////////////

      // NOTE: Breaks automatic field getters with Sequelize if not in the correct spot.
      //   See: https://github.com/sequelize/sequelize/issues/11326
      //   See also: https://github.com/Polymer/lit-element/issues/234#issuecomment-687673767
      [require('@babel/plugin-proposal-class-properties'), {loose: true}],

      [require('babel-plugin-transform-typescript-metadata')],

   ]

}

[aleccool213]

Thanks @vjpr, I finally got it to work this with .babelrc file in my Next.js app.

{
  "presets": ["next/babel"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@vjpr/babel-plugin-parameter-decorator",
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "babel-plugin-transform-typescript-metadata"
  ]
}

[PaulContremoulin]

Hi everyone,

I have an issue with babel (I think). My @FieldResolvers don't seem to work after build. The function is not executed to resolve the field and graphql returns the following error: Error: Cannot return null for non-nullable field Article.tags..

In dev mode (ts-node --files ./src/index.ts), everything works well.

babel.config.json :

{
  "presets": [
    "@babel/preset-typescript",
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ]
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {"legacy":  true}],
    "babel-plugin-parameter-decorator",
    ["@babel/plugin-proposal-class-properties", {"loose":  true}],
    "babel-plugin-transform-typescript-metadata"
  ]
}

tsconfig.json :

{
  "compilerOptions": {
    "target": "es2018",
    "module": "CommonJS",
    "lib": ["es2018", "esnext.asynciterable"],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "emitDeclarationOnly": true,
    "isolatedModules": true
  }
}

[aleccool213]

Just for anyone who is having trouble getting this working, Next.js uses Babel as a transpiler and I have a working example here: https://github.com/aleccool213/next-js-typeorm-typegraphql-example

[jonjrodriguez]

Hi everyone,

I have an issue with babel (I think). My @FieldResolvers don't seem to work after build. The function is not executed to resolve the field and graphql returns the following error: Error: Cannot return null for non-nullable field Article.tags..

In dev mode (ts-node --files ./src/index.ts), everything works well.

@PaulContremoulin did you ever get this resolved? Running into the same issue with FieldResolver