npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

graphql-ts

v0.1.5

Published

graphQL implementation for Typescript

Downloads

146

Readme

GraphQL.ts

Build Status npm version

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 {
  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, field, objectType} from 'graphql-ts'


@objectType
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.