lelelemon’s blog

カメの歩みでのんびり学んでいます。

【React】PrismaでDB検索／登録／更新／削除を行うー登録処理

はじめに

前回、 Prisma で検索処理のサンプルを書かせていただきましたが、今回は登録処理のサンプルになります。

lelelemon.hatenablog.com

 

DB定義再掲

schema.prisma
schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model user {
  id Int @id @default(autoincrement())
  nickname String @db.VarChar(255)
  created_at DateTime @default(now())
  habbits habbit[]
}

model habbit {
  id Int @id @default(autoincrement())
  user_id Int
  title String @db.VarChar(255)
  created_at DateTime @default(now())
  updated_at DateTime?
  deleted_at DateTime?
  user  user @relation(fields: [user_id], references: [id])
  habbit_activities habbit_activity[]
}

model habbit_activity {
  id Int @id @default(autoincrement())
  habbit_id Int
  checked Boolean
  created_at DateTime @default(now())
  habbit habbit @relation(fields: [habbit_id], references: [id])
}
  • 今回は、habbit テーブルと、habbit_activity テーブル登録を以下で試していきます。

 

Prismaでレコード登録処理

まずはDB登録する際の型を作成します。

habbitDto.ts
export class HabbitDto {
  id?: number;
  user_id: number;
  title: string;
  updated_at?: Date;

  constructor(
    user_id: number,
    title: string,
    id?: number,
    updated_at?: Date,
    deleted_at?: Date
  ) {
    this.id = id;
    this.user_id = user_id;
    this.title = title;
    this.updated_at = updated_at;
  }
}
  • habbit テーブルは更新処理も設ける予定のため、id を任意パラメーターとしています。id に値があれば更新、なければ今回の登録処理が動くようにしたいと思います
  • created_at は schema.prisma の定義で @default(now()) としてレコード登録時に自動で値がセットされるようにしているため、パラメーターとしては設けていません
habbitActivityDto.ts
export class HabbitActivity {
  habbit_id: number;
  checked: boolean;

  constructor(habbit_id: number, checked: boolean) {
    this.habbit_id = habbit_id;
    this.checked = checked;
  }
}
  • habbit_activity は履歴データで、更新は特に発生しないので、リレーションを貼っている habbit テーブルの id のみ受け取り、habbit_activity 自体の id は@default(autoincrement()) でレコード登録時の処理に任せます

 

続いて、登録処理を実装します。

habbit.ts
export async function createHabbit(data: HabbitDto) {
  return prisma.habbit.create({
    data: {
      user_id: data.user_id,
      title: data.title,
    },
  });
}

export async function createHabbitActivity(data: HabbitActivityDto) {
  return prisma.habbit_activity.create({
    data: {
      habbit_id: data.habbit_id,
      checked: data.checked,
    },
  });
}
  • data フィールドに、オブジェクト形式で各カラムに登録する値を指定します
  • create メソッドの詳細は、下記も合わせてご参照ください

www.prisma.io

 

動作確認

先ほどの登録処理を動作確認していきます。

NextJS の App Router の機能を使って、

src/app/api/habbit/route.ts と src/app/api/habbit_activity/route.ts にそれぞれ API を用意し、API リクエストでDB登録を検証します。

 

src/app/api/habbit/route.ts
import { createHabbit } from "@/lib/prisma/habbit";
import { HabbitDto } from "@/models/db/habbitDto";
import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
  try {
    const jsonBody = await request.json();
    // parse request body
    const habbitDto = new HabbitDto(jsonBody.user_id, jsonBody.title, 0);
    // add habbit
    createHabbit(habbitDto);
    return NextResponse.json(
      { message: "Success", data: habbitDto },
      { status: 200 }
    );
  } catch (error) {
    console.error(`[Add Habbit]unexpected error: ${error}`);
    return NextResponse.json({ message: "Error" }, { status: 500 });
  }
}

 

src/app/api/habbit_activity/route.ts 
import { createHabbitActivity } from "@/lib/prisma/habbit";
import { HabbitActivityDto } from "@/models/db/habbitActivityDto";
import { HabbitDto } from "@/models/db/habbitDto";
import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
  try {
    const jsonBody = await request.json();
    // parse request body
    const habbitActivityDto = new HabbitActivityDto(
      jsonBody.habbit_id,
      jsonBody.checked
    );
    // add habbit
    createHabbitActivity(habbitActivityDto);
    return NextResponse.json(
      { message: "Success", data: habbitActivityDto },
      { status: 200 }
    );
  } catch (error) {
    console.error(`[Add HabbitActivity]unexpected error: ${error}`);
    return NextResponse.json({ message: "Error" }, { status: 500 });
  }
}

 

habbit登録 curl コマンド

curl --location 'http://localhost:3000/api/habbit' \
--header 'Content-Type: text/plain' \
--data '{
    "user_id":1,
    "title": "test title"
}'

 

habbit_activity 登録 curl コマンド

curl --location 'http://localhost:3000/api/habbit_activity' \
--header 'Content-Type: text/plain' \
--data '{
    "habbit_id":1,
    "checked": false
}'

habbit テーブル Before


habbit テーブル After


habbit_activity テーブル Before

habbit_activity テーブル After


それぞれのテーブルに、赤枠のレコードが追加されていることを確認しました。

 

終わりに

Prisma で登録処理もシンプルに書けることを知りました。おそらく更新や削除も同じような感じで書けるのかなと予想しておりますが、これらも試せたら別途記事に書きたいと思います。

 

参考にした情報

zenn.dev