TypeScrtiptで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募集中