TypeScrtiptでGraphQL書いてみない？ #GraphQL

誰?

@Quramy

最近GraphQL触ってます

GraphQL is 何？

Clientが欲しい値だけを問い合わせるための仕組み
階層的にデータを要求できる
厳密な型定義(schema)がある

https://www.graphqlhub.com/playground を触ると良いかも。

ReactよりAngularの方が~~得意なので~~慣れているので、無理やりAngular2 でRelay動かしたりする遊びが趣味です。

https://quramy.github.io/angular2-graphql-note/

GraphQLのServer側、実装したことありますか？

こんな感じ.js

var schema = new graphql.GraphQLSchema({
  query: new graphql.GraphQLObjectType({
    name: 'Query',
    fields: {
      user: {
        type: userType,
        args: {
          id: { type: graphql.GraphQLString }
        },
        resolve: function (_, args) {
          return data[args.id];
        }
      }
    }
  })
});

いちいちtypeとか出てくる

typeとかめんどい.js

  id: { type: graphql.GraphQLString }, // ← これ

めんどい

我々には型つき言語がある

flowもいいけどTypeScriptもね！

ClassにDecorator振ってSchemaに出来ねぇかなぁ

こんな感じ.ts

import { Schema, Query, ObjectType, Field, schemaFactory } from "graphql-decorator";

@ObjectType() class QueryType {
    @Field() greeting(): string {
        return "Hello, world!";
    }
}
@Schema() class SchemaType {
    @Query() query: QueryType;
}

const schema = schemaFactory(SchemaType);

How?

TypeScriptの場合、emitDecoratorMetadata で型情報をReflectに渡すことができる.

これを使って、classの型情報を元にGraphQLのObjectTypeへ変換するようにしている

https://github.com/Quramy/graphql-decorator

所感

結局Decoratorだらけで楽なんだか大変なんだか分からん
JAX-WSとかJAX-Bっぽい。
気が乗ればflow対応するかも。flow typeからmetadataにemitするいい感じのbabel-plugin募集中