📖

Next.js Supabase Prisma を使用してアプリを作る 3/6 覚書

2022/06/08に公開約1,600字

https://themodern.dev/courses/build-a-fullstack-app-with-nextjs-supabase-and-prisma-322389284337222224
気になったところだけ書くので実際にされる方は↑から進めてください。

スキーマの作成

モデル作成

Prisma モデルを使用して Prisma スキーマ内で定義する。
アプリケーションのエンティティを表す。

schema.prisma
model Home {
  // 主キー uuid() とか autoincrement() とかでもok
  id String @id @default(cuid())
  // ? 必須ではない. ? がないと全部必須.
  image String?
  title String
  description String
  // 浮動小数点. double precision or DOUBLE.
  price Float
  guests Int
  beds Int
  baths Int
  // 基本的にデータモデルには下記2つは入れたほうが良い.追跡できる.
  createdAt DateTime @default(now())
  updateAt DateTime @updatedAt
}

スカラータイプとDB列

Prismaクライアントを生成する

Prisma クライアントを生成する必要はなぜか

Prisma モデルを定義(今回であれば Home モデル)できたら、Prismaクライアントが生成できる。

DBクエリを送信するためのAPIを提供するために。

Prisma クライアントをインストールして生成する

  • インストール
    npm install @prisma/client
  • コマンドから Prisma クライアントを生成
  • npx prisma generate

生成された Prisma クライアントはデータを操作するために必要なJSコードを提供する。

PrismaMigrate で Supabase にテーブル作成

prisma を使用するとスキーマを簡単にDBと同期できる。
npx prisma db push

  • push
    • 強制的に更新するイメージ
    • すでに存在するモデルに新しい必須フィールドを追加した場合、既存のDBをリセットする必要がある
    • プロトタイピングやスキーマ設計をするにはこっち

npx prisma migrate dev

Prisma が生成した SQL クエリがあることを確認

PrismaStudio を使用してデータを探索

DBクライアントも付属されている。
npx prisma studio

http://localhost:5555/
から確認。
add record で適当なデータを追加。

Discussion

ログインするとコメントできます