Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

TypeScrtiptでGraphQL書いてみない?

More than 3 years have passed since last update.

TypeScrtiptでGraphQL書いてみない?

by Quramy
1 / 15

誰?

@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募集中
Quramy
Front-end web developer. TypeScript, Angular and Vim, weapon of choice.
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away