我正在挑战使用Node.js、Express、Angular和sequelize开发Web系统（类似于MEAN堆栈，但由于在数据库中使用了Postgres，所以可以称为PEAN）。

我在查找如何从Angular访问Node.js+Express时发现了一篇文章，文章说GraphQL比REST更方便，所以我决定尝试使用它。我希望整体上都使用TypeScript进行编写，所以决定使用type-graphql。

在中文中，对“graphsql相关的安装”进行改写，只需提供一种选择：

图形数据库GraphQL的安装相关

请安装 GraphSQL、@types/graphql 和 type-graphsql。

使用npm安装graphql、@types/graphql和type-graphql –save。

更改 tsconfig.json

请在compilerOptions中添加以下行：

    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,

将编译器选项的目标设置为es2016。

"target": "es2016"

将lib修改如下。

"lib": [
      "es2016",
      "esnext.asynciterable",
      "dom"
]

在模型类中添加type-graphql的定义。

在类上添加@ObjectType()，在字段上添加@Field()。
需要导入的模块是reflect-metadata和type-graphql。
以下代码中还包含sequelize-typescript定义的内容。

import 'reflect-metadata';
import { ObjectType, Field, ID } from 'type-graphql';
import { Table, Column, Model, DataType, PrimaryKey, Unique, Default } from 'sequelize-typescript';

@ObjectType()
@Table
export class Account extends Model<Account> {
    @Field(type => ID)
    @PrimaryKey
    @Unique
    @Default(DataType.UUIDV4)
    @Column(DataType.UUID)
    id?: string;
    @Field()
    @Column(DataType.STRING)
    name: string;
    @Field()
    @Column(DataType.STRING)
    kana: string;
    @Field()
    @Column(DataType.STRING)
    email: string;
    @Field()
    @Column(DataType.STRING)
    postcode: string;
    @Field()
    @Column(DataType.STRING)
    address: string;
    @Field()
    @Column(DataType.STRING)
    phone: string;
    @Field()
    @Column(DataType.STRING)
    password: string;

    constructor(name: string, kana: string, email: string, postcode: string, address: string, phone: string, password: string) {
        super();

        this.name = name;
        this.kana = kana;
        this.email = email;
        this.postcode = postcode;
        this.address = address;
        this.phone = phone;
        this.password = password;
    }
}

创建一个名为Resolver的类

创建 GraphQL 的解析器类。

import 'reflect-metadata';
import { Resolver, Mutation, Arg, InputType, Field, Query } from 'type-graphql';
import { Account } from '../models/account';

@InputType()
export class AccountInput implements Partial<Account> {
    @Field()
    name: string;
    @Field()
    kana: string;
    @Field()
    email: string;
    @Field()
    postcode: string;
    @Field()
    address: string;
    @Field()
    phone: string;
    @Field()
    password: string;

    constructor(name: string, kana: string, email: string, postcode: string, address: string, phone: string, password: string) {
        this.name = name;
        this.kana = kana;
        this.email = email;
        this.postcode = postcode;
        this.address = address;
        this.phone = phone;
        this.password = password;
    }
}

@Resolver(of => Account)
export class AccountResolver {
    @Query(returns => Account)
    async account() {
        const acc: Account = new Account('name', 'kana', 'email', 'postcode', 'address', 'phone', 'password');

        return Promise.resolve(acc);
    }

    @Mutation(returns => Account)
    addAccount(
        @Arg('account') accountInput: AccountInput
    ): Promise<Account> {
        const acc: Account = new Account('name', 'kana', 'email', 'postcode', 'address', 'phone', 'password');

        return Promise.resolve(acc);
    }
}

将Graphql集成至express中。

我们将在express的app.ts中集成Graphql。

import graphqlHTTP from 'express-graphql';
import { buildSchema } from 'type-graphql';
import { AccountResolver } from './resolvers/accountresolver';

// Graphqlを組み込む
async function bootstrap() {
  const schema = await buildSchema({
    resolvers: [ AccountResolver ]
  });

  app.use('/graphql', graphqlHTTP({
    schema: schema,
    graphiql: true
  }));
}

bootstrap().catch(err => {
  console.log(err);
});

构建并访问Graphql。

构建并运行项目，访问http://localhost:3000/graphql，将显示Graphql查询编辑器（Graphiql）。