TypeGraphQL -TypeScriptの導入-
ひとつ前のGraphQL + Node.jsでGraphQLサーバーを立てて簡単なユーザー認証を持ったAPIを作成しましたが、今回は同様のAPIをGraphQLとTypeSCriptを使って作成します。またここではTypeORMと呼ばれるPrismaとはまた違ったORMを使用します。TypeORM公式サイトはこちら
TypeORMとは
比較的新しいNode.js用のORMでTypeScriptと相性の良い。リレーショナルDBサポート(MySQLやPostgresQL)。DataMapperとActiveRecordの両方をサポートしています。
Projectの作成
まずターミナルを開き、graph-typeというディレクトリを作り、プロジェクトのルートに移動します。
次にyarn init -yでpackage.jsonファイルを作成します。今回はnpmではなくyarnでパッケージをインストールしますが好みでかえていただいて構いません。
mkdir graph-type
cd graph-type
yarn init -y
前回と同じようにGraphQLのためのパッケージをインストールしますが今回はTypescriptを使用するのでtype-graphqlも必要です。reflect-metadataは@Entityや@Columnなどのデコレーターを扱うときに必要になります。また効率化のためにnodemonもインストールしておきます。
yarn add apollo-server-express express graphql type-graphql reflect-metadata
yarn add -D nodemon
"scripts": {
"start": "nodemon src/index.ts"
}
tsconfig.jsonファイルを作成します。
npx tsconfig.json
tsconfig.jsonに関してはこちらをうつしてください。
srcファイル下にindex.tsを作成します。
mkdir src
touch src/index.ts
src/index.tsで簡単なQueryと共にtype-graphqlについて学んでいきましょう。
// src/index.js
import "reflect-metadata"
import { ApolloServer } from "apollo-server-express";
import Express from "express";
import { buildSchema, Resolver, Query } from "type-graphql";
@Resolver()
class HelloResolver {
@Query(() => String)
async helloWorld() {
return "Hello World!";
}
}
const serverStart = async () => {
const schema = await buildSchema({
resolvers: [HelloResolver]
});
const server = new ApolloServer({ schema });
const app = Express();
server.applyMiddleware({ app });
app.listen(4000, () => {
console.log("🚀 server started on http://localhost:4000/graphql");
});
};
serverStart();
上から説明していきます。まずresolverをかくときには先頭に@Resolverが必要です。classを定義し、その中に@Queryや@Mutationを記述します。ここではシンプルにString型の"Hello World!"をかえす関数にしています。また、@Query(() => String, { nullable: false })のようにnullであるかどうかをコントロールできます。
const schema = await buildSchema({
resolvers: [HelloResolver]
});
schemaを定義してその中に resolvers: [HelloResolver]のようにresolver関数を収納します。そこから下のコードはGraphQL + Node.jsのチュートリアルと同様です。
Playgroundで試してみましょう。
TypeORMの導入
必要なパッケージをインストールし、TypeORMの設定を書くファイルであるormconfig.jsonを作成します。
yarn add pg typeorm
touch ormconfig.json
ormconfig.jsonに関してはこちらを参照してください。同時にPostgresQLを起動して、データベースを作成してください。そしてormconfig.jsonの"database"は作成したデータベース名にしてください。
createdb typeorm
src/index.tsにデータベースと接続するためのコードをかきます。
// src/index.js
import "reflect-metadata"
import { ApolloServer } from "apollo-server-express";
import Express from "express";
import { buildSchema, Resolver, Query } from "type-graphql";
import { createConnection } from 'typeorm'
@Resolver()
class HelloResolver {
@Query(() => String)
async helloWorld() {
return "Hello World!";
}
}
const serverStart = async () => {
await createConnection();
const schema = await buildSchema({
resolvers: [HelloResolver]
});
const server = new ApolloServer({ schema });
const app = Express();
server.applyMiddleware({ app });
app.listen(4000, () => {
console.log("🚀 server started on http://localhost:4000/graphql");
});
};
serverStart();
await createConnection();でpostgresqlと接続します。
次にユーザーentityを作成すためにsrc下にentity/User.tsを作成します。
src/entity/User.ts
import { Entity, PrimaryGeneratedColumn, Column, BaseEntity } from "typeorm";
@Entity()
export class User extends BaseEntity {
@PrimaryGeneratedColumn()
id: number;
@Column()
firstname: string;
@Column()
lastname: string;
@Column("text", { unique: true })
email: string;
@Column()
password: string;
}
TypeORMのEntityについて
Entityはデータベーステーブルを作成するために定義するクラスです。基本的なentityなカラムとリレーションで構成されており、@Entity()を先頭につけてクラスを定義します。@PrimaryGeneratedColumn()はInt型の自動的に増加するカラムを作成します。 TypeORMは基本的なカラム型をサポートしており、@Column()を
@Column("text", { unique: true })のように柔軟にカラム型を操作できる。
これをうつしたらyarn startでサーバーをはしらせてデータベースのマイグレーションをおこないましょう。エラーなくできればpsql -lで確認してみてください。
しっかりとPostgresQLに反映されていたら次のユーザー認証の実装に進みましょう。