NestJSとPrismaと PostgreSQL を使ってブログっぽいものを作ります。NestJS で開発するときの始め方のメモです。GraphQL(コードファースト)も使います。
NestJS のプロジェクトを作成
下記で作成されます。今回は npm を使います。
nest new cms
Prisma を入れます
下記で prisma を入れて、初期化します。npx prisma init
は--datasource-provider
オプションをつけられます。これをsqlite
などにすると、それに合わせて初期化されます。--datasource-provider
オプションのデフォルトはpostgresql
です。
npm i -D prisma npx prisma init
PostgreSQL を設定します
とりあえずローカルでの開発を進めます。docker-compose で PostgreSQL を用意します。
version: '3.9' services: db: image: postgres:13 container_name: cms-postgres restart: always environment: POSTGRES_USER: myuser POSTGRES_PASSWORD: mypassword POSTGRES_DB: mydatabase ports: - '5432:5432' volumes: - db-data:/var/lib/postgresql/data volumes: db-data:
上記はプロジェクトルートに配置して、プロジェクトルートで下記を実行します。
docker-compose up
.env の DB の URL を設定します
prisma init
の際に、自動的に.env
ファイルが作成されます。.env
ファイル内のDATABASE_URL
を上記のdocker-compose.yml
の内容に合わせて修正します。
DATABASE_URL="postgresql://myuser:mypassword@localhost:5432/cms-postgres?schema=public"
schema.prisma に model を追加して migrate します
schema.prisma
にmodel
を追加することで、migrate するとテーブルにmodel
の内容が反映されます。合わせて migration ファイルも作成されます。今回は暫定的な内容として、ブログ記事を表すPost
と、投稿者を表すUser
を追加しました。
... model Post { id String @id @default(uuid()) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt title String content String? published Boolean @default(false) author User @relation(fields: [authorId], references: [id]) authorId String } model User { id String @id @default(uuid()) email String @unique name String? posts Post[] }
上記を追加したら、下記コマンドで migrate します。
npx prisma migrate dev --name init
GraphQL を入れます
NestJS で GraphQL を使う際の説明はここにあります。まずは、GraphQL 関連をインストールします。
npm i @nestjs/graphql @nestjs/apollo @apollo/server graphql
CLI プラグインを設定します
CLI プラグインを有効にすると、コードを書く量を減らせます。詳細はこちらをご確認ください。
CLI プラグインを有効にするには、プロジェクトルートにある、nest-cli.json
のplugins
に@nestjs/graphql
を追加します。
{ "$schema": "https://json.schemastore.org/nest-cli", "collection": "@nestjs/schematics", "sourceRoot": "src", "compilerOptions": { "deleteOutDir": true, "plugins": ["@nestjs/graphql"] } }
コードファースト前提で GraphQL を設定します
まずは、app.module.ts
のimports
にGraphQLModule
を追加します。その際にオプションで、autoSchemaFile
を追加します。これを追加すると、モデルを定義したファイルに適当なデコレータを付与することで、自動的に gql ファイルを作成するようにできます。
import { Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService } from './app.service'; import { GraphQLModule } from '@nestjs/graphql'; import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo'; import { join } from 'path'; @Module({ imports: [ GraphQLModule.forRoot<ApolloDriverConfig>({ driver: ApolloDriver, autoSchemaFile: join(process.cwd(), 'src/schema.gql') }) ], controllers: [AppController], providers: [AppService] }) export class AppModule {}
User と Post のリソースを自動作成します
NestJS はリソースを自動作成できます。しかも GraphQL の利用を前提としたリソース作成が可能です。下記のようにやります。
nest g resource users nest g resource posts
上記の nest g resource users を実行すると、下記のように GrahpQL が選択できますので、GraphQL(code first)を選択します。
❯ nest g resource users ? What transport layer do you use? REST API ❯ GraphQL (code first) GraphQL (schema first) Microservice (non-HTTP) WebSockets
start:dev を実行して schema.gql を作成してみる
下記コマンドで、NestJS アプリが起動します。:dev
をつけると、コードの変更がある度にホットリロードされます。
npm run start:dev
先程、src/app.module.ts
にautoSchemaFile
を設定しました。また、nest g resource posts
を実行した際に、src/posts/entities/post.entity.ts
が自動生成されているかと思います。このファイルに、Post モデルの構造(型)を書き、各フィールドに適切なデコレータを付与すると、start:dev
を実行した際等に、autoSchemaFile
で設定した場所に、自動的にschema.gql
が作成されます。
現在は、自動生成した状態のままなので、schema.gql
は下記のような内容になっているかと思います。
# ------------------------------------------------------ # THIS FILE WAS AUTOMATICALLY GENERATED (DO NOT MODIFY) # ------------------------------------------------------ type User { """ Example field (placeholder) """ exampleField: Int! } type Post { """ Example field (placeholder) """ exampleField: Int! } type Query { users: [User!]! user(id: Int!): User! posts: [Post!]! post(id: Int!): Post! } type Mutation { createUser(createUserInput: CreateUserInput!): User! updateUser(updateUserInput: UpdateUserInput!): User! removeUser(id: Int!): User! createPost(createPostInput: CreatePostInput!): Post! updatePost(updatePostInput: UpdatePostInput!): Post! removePost(id: Int!): Post! } input CreateUserInput { """ Example field (placeholder) """ exampleField: Int! } input UpdateUserInput { """ Example field (placeholder) """ exampleField: Int id: Int! } input CreatePostInput { """ Example field (placeholder) """ exampleField: Int! } input UpdatePostInput { """ Example field (placeholder) """ exampleField: Int id: Int! }
Post の Entity を完成させます
現時点の Post の DB テーブルの構造に合わせて、post.entity.ts
を修正します。schema.prisma の Post モデルをコメントとして貼り付けると、自動で Github Copilot が下記を作成してくれました。
import { ObjectType, Field, Int } from '@nestjs/graphql'; // model Post { // id String @id @default(uuid()) // createdAt DateTime @default(now()) // updatedAt DateTime @updatedAt // title String // content String? // published Boolean @default(false) // author User @relation(fields: [authorId], references: [id]) // authorId String // } @ObjectType() export class Post { @Field(() => String) id: string; @Field(() => Date) createdAt: Date; @Field(() => Date) updatedAt: Date; @Field(() => String) title: string; @Field(() => String, { nullable: true }) content?: string; @Field(() => Boolean) published: boolean; @Field(() => String) authorId: string; }
上記のままで問題ないのですが、先程、nest-cli.json
に@nestjs/graphql
プラグインの利用を設定しました。このプラグインの説明はここにありますが、基本的に@Field
を勝手につけてくれます。この方がシンプルになりますので、不要な@Field
を削除してみます。尚、content?
のように?
がついている場合は、自動的にnullable:true
が設定されます。
import { ObjectType } from '@nestjs/graphql'; @ObjectType() export class Post { id: string; createdAt: Date; updatedAt: Date; title: string; content?: string; published: boolean; authorId: string; }
上記と同じ要領で、src/posts/dto/create-post.input.ts
とupdate-post.input.ts
も修正します。Create 時は、とりあえず、タイトルとコンテンツのみ受け取り、後は自動でデフォルト値あるいは認証ユーザの ID が保存されるものとします。また、Update 時はタイトル、コンテンツと記事 ID を受け取るものとします。
import { InputType } from '@nestjs/graphql'; @InputType() export class CreatePostInput { title: string; content?: string; }
import { CreatePostInput } from './create-post.input'; import { InputType, PartialType } from '@nestjs/graphql'; @InputType() export class UpdatePostInput extends PartialType(CreatePostInput) { id: string; }
Post の resolver を微調整します
今回Post.id
は UUID(string)です。nest g resource posts
により、自動生成されたpost.resolver.ts
は、全体的にid
が Int 型の想定になっています。これらを修正します。
import { Resolver, Query, Mutation, Args, Int } from '@nestjs/graphql'; ... @Resolver(() => Post) export class PostsResolver { ... @Query(() => Post, { name: 'post' }) findOne(@Args('id', { type: () => String }) id: string) { return this.postsService.findOne(id); } ... @Mutation(() => Post) removePost(@Args('id', { type: () => String }) id: string) { return this.postsService.remove(id); } }
Post の Service を作成します
posts.service.ts に、Prisma による CURD の処理を書きます。そのためには、PrismaService を作る必要がありまして、作成方法がここに書いてあります。ただ、nestjs-prismaというライブラリがありまして、これを使うと、自分で PrismaService を作らなくてよくなります。今回はこれを使ってみます。
npm i nestjs-prisma
posts.module.ts のimports
にPrismaModule
を追加します。
import { Module } from '@nestjs/common'; import { PostsService } from './posts.service'; import { PostsResolver } from './posts.resolver'; import { PrismaModule } from 'nestjs-prisma'; @Module({ imports: [PrismaModule], providers: [PostsResolver, PostsService] }) export class PostsModule {}
posts.service.ts に PrismaService を使った CURD のコードを書きます。
import { Injectable } from '@nestjs/common'; import { CreatePostInput } from './dto/create-post.input'; import { UpdatePostInput } from './dto/update-post.input'; import { PrismaService } from 'nestjs-prisma'; @Injectable() export class PostsService { constructor(private readonly prisma: PrismaService) {} create(createPostInput: CreatePostInput) { const authorId = 'dummy-id'; return this.prisma.post.create({ data: { ...createPostInput, author: { connect: { id: authorId } } } }); } findAll() { return this.prisma.post.findMany(); } findOne(id: string) { return this.prisma.post.findUnique({ where: { id } }); } update(id: string, updatePostInput: UpdatePostInput) { return this.prisma.post.update({ where: { id }, data: updatePostInput }); } remove(id: string) { return this.prisma.post.delete({ where: { id } }); } }
User の Entity や Service も完成させます
上記の Post とやることは同じなので割愛します。全体のコードは下記にありますので、よかったら参考にしてください。
https://github.com/edo1z/nestjs-graphql-passport-sample
schema.gql を確認してみます
Entity や DTO などを修正したので、現時点の schema.gql を確認してみます。下記のようになっていました。便利ですね。
# ------------------------------------------------------ # THIS FILE WAS AUTOMATICALLY GENERATED (DO NOT MODIFY) # ------------------------------------------------------ type User { id: String! email: String! name: String } type Post { id: String! createdAt: DateTime! updatedAt: DateTime! title: String! content: String published: Boolean! authorId: String! } """ A date-time string at UTC, such as 2019-12-03T09:54:33Z, compliant with the date-time format. """ scalar DateTime type Query { users: [User!]! user(id: String!): User! posts: [Post!]! post(id: String!): Post! } type Mutation { createUser(createUserInput: CreateUserInput!): User! updateUser(updateUserInput: UpdateUserInput!): User! removeUser(id: String!): User! createPost(createPostInput: CreatePostInput!): Post! updatePost(updatePostInput: UpdatePostInput!): Post! removePost(id: String!): Post! } input CreateUserInput { email: String! name: String } input UpdateUserInput { email: String name: String id: String! } input CreatePostInput { title: String! content: String authorId: String! } input UpdatePostInput { title: String content: String authorId: String id: String! }
GraphQL の Playground でデータを追加してみます
下記にアクセスすると Playground が開きます。
http://localhost:3000/graphql
まずは User を追加します。
mutation { createUser(createUserInput: { email: "hoge@example.com", name: "Hoge Taro" }) { id email name } }
上記を実行して成功したら、下記のようなレスポンスがあります。
{ "data": { "createUser": { "id": "2e72a8e3-db17-403b-815a-eb4871adb093", "email": "hoge@example.com", "name": "Hoge Taro" } } }
次に Post を追加します。上記のレスポンスの UserID を使います。
mutation { createPost( createPostInput: { title: "Sample Post" content: "Hello world!" authorId: "2e72a8e3-db17-403b-815a-eb4871adb093" } ) { id title authorId createdAt } }
成功したら下記のようなレスポンスがきます。
{ "data": { "createPost": { "id": "17964948-6298-4dc5-8205-f381b41b14e9", "title": "Sample Post", "authorId": "2e72a8e3-db17-403b-815a-eb4871adb093", "createdAt": "2023-04-08T05:12:37.612Z" } } }
次に、Post を修正してみましょう。
mutation { updatePost(updatePostInput: { id: "17964948-6298-4dc5-8205-f381b41b14e9", title: "Hoge Post" }) { id title content authorId } }
成功したら下記のようなレスポンスが来ます。
{ "data": { "updatePost": { "id": "17964948-6298-4dc5-8205-f381b41b14e9", "title": "Hoge Post", "content": "Hoge world!!", "authorId": "2e72a8e3-db17-403b-815a-eb4871adb093" } } }
次に Post を削除してみましょう。
mutation { removePost(id: "17964948-6298-4dc5-8205-f381b41b14e9") { id title } }
成功したら下記のようなレスポンスがきます。
{ "data": { "removePost": { "id": "17964948-6298-4dc5-8205-f381b41b14e9", "title": "Hoge Post" } } }
Prisma Studio でデータを確認してみます
下記を実行すると、studio が起動します。
npx prisma studio
起動すると、下記で確認できるようになります。
http://localhost:5555
認証の仕組みをつくります
これで一応基本的に CURD が出来ましたので、次にユーザの認証関連を作ってみます。フロントも一緒に作る場合で、フロントが Next.js の場合等は、NextAuth が結構便利なのかなと思っていて、ここでやってみたりしました。
今回は、ヘッドレス API を作るイメージで、認証の仕組みも完全にバックエンドに持ってくる想定です。そのため、今回は Passport を使ってみます。
下記は GraphQL の Mutation でログイン(email + password)出来るようにして、ログイン出来たら JWT が発行されて、Profile 画面など認証が必要な場合は、リクエストヘッダの JWT を確認するようにしています。ここを参考にしました。