mydnicq/graphql-ts

Graphql implementation in Typescript using decorator

GraphQL.ts

The Typescrit implementation for GraphQL, a query language for APIs created by Facebook. See specification here http://graphql.org/

Getting Started

That package is currently in development and not ready for PRODUCTION. Graphql.ts use decorator and metadata for generate a graphql.js model. The why of this package is to provide a suger syntax for Typescript and use the power of the typings. Feel free to contribute, any issues, pull request or stars are welcome.

Using GraphQL.ts

Install GraphQL.ts from npm

npm install --save graphql-ts

We use reflect-metadata for have type at the runtime, so we need to pass some parameters to the compilator

"compilerOptions": {
       "module": "commonjs",
       "target": "es6",
       "emitDecoratorMetadata": true,
       "experimentalDecorators": true,
   }

GraphQL.ts provides the capabilities to build the schema. This schema will be interprated by GraphQL.js

First, build a GraphQL type schema which maps to your code base.

import {field, objectType} from 'graphql-ts'

@objectType
class root{
  @field
  hello():string{
    return "world"
  }
}

//That is the entry point of the schema
graphqlTs.init(new root());

This code will generate at the runtime the equivalent model

import {
  graphql,
  GraphQLSchema,
  GraphQLObjectType,
  GraphQLString
} from 'graphql';

var schema = new GraphQLSchema({
  query: new GraphQLObjectType({
    name: 'RootQueryType',
    fields: {
      hello: {
        type: GraphQLString,
        resolve() {
          return 'world';
        }
      }
    }
  })
});

Then, serve the result of a query against that schema.

import {graphqlTs} from 'graphql-ts'
import {graphql} from 'graphql'

class root{
  @field
  hello():string{
   return "world"
  }
}
graphqlTs.init(new root());

var queryString = '{ hello }';
graphqlTs.query(queryString).then(result => {

  // Prints
  // {
  //   data: { hello: "world" }
  // }
  console.log(result);

});

Decorator

Graphql-ts work with decorator for annotate the code and then generate the model

• @objectType create an object type with the class name as name

@objectType
class user{
  @field
  name:string
}

• @inputType create an input object type with the class name as name

@inputType
class userInput{
    @field
    name:string
}

• @scalarType create a scalar type, for more information about the scalar in graphql check here

@scalarType
export class DateQl {
    @field
    serialize(value: any) {
        //you're code here
    };
    @field
    parseValue(value: any) {
        //you're code here
    }
    @field
    parseLiteral(valueNode: any): any {
        //you're code here
    }

• @field add the field in the model, if it's a function, it will be use as resolve. In the resolve, 'this' will be the equivalent of _ in graphql, and the context will be in this.contextQl

@objectType
class user{
  @field
  name:string

  @field
  name:string

  @field
  fullName():string{
    console.log(this.contextQl) //value of the context, by default req
    return this.firstName + ' ' + this.lastName
  }
}

• @description(name:string) add a description to the field or the object

@objectType
class user{
  @field  @description('The name of the user')
  name:string
}

• @list same as field but return a list, for more information about the list in graphql check here
• @returnType(Type) Cause of lack in typescript about emit decorator for complexe object, when we returne an object, Array for exemple, we are not able to have the T type, so that's why we need to specify that T using the @returnType

@objectType
class user{
  @field  @description('The name of the user')
  name:string

  @list @returnType(Number)
  notes:number[]

  @list @returnType(user)
  friends():user[]{
    return dataUsers({friends:this.name});
   }
}

• @required(['paramName']) set a params as required

@objectType @description('voila enfin le root')
export class root {
    @field @returnType(user) @required(['firstName'])
    user(firstName:string):user{
        return dataUsers({name:firstName}).firstOrDefault();
    }
}

• @nullable(boolean) set a field or input nullable or not, by default is true

@inputType
export class userInput{
  @field //nullable is true by default
  firstName:string

  @field @nullable(false)
  lastName:string

  @list @returnType(String) @nullable(false)
  friends:string[]
}

• @mutation create a mutation, see here for more information

   @mutation
    addUser(userInput:userInput):user{
      let newUser = new user();
      dataUsers().push(<any>newUser);
      return  newUser;
    }

###More complex exemple

For more complexe case, check the exemple folder.