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 -ypackage.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に反映されていたら次のユーザー認証の実装に進みましょう。