GraphQL

TypeScrtiptでGraphQL書いてみない?

More than 1 year has passed since last update.


誰?

@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募集中