blitz generate を使わずに CRUD ページを作成するメモ

blitz generate を使わずに実装することで、Blitz の仕組みを理解することを目的としたメモ。

はじめに、db/prisma.schema ファイルにモデル定義を追加する。

model Project {
  id          String    @id @default(uuid())
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt
  code        String
  name        String
}

モデル定義後、次のコマンドを実行しマイグレーションを実行する。

(マイグレーション実行)
$ blitz prisma migrate dev

(マイグレーション名を聞かれるので、今回は "add project" と入力する。)
√ Name of migration ... add project

マイグレーション後、次のコマンドを実行して Prisma Client を再生成する。
この手順は、モデル定義を変更した場合は常に必要。

(Prisma Client を再生成する)
$ blitz prisma generate

上記の手順で、blitz アプリケーションの db から参照できるようになる。

blitz console を利用し、動作確認する。

(blitz console 起動)
$ blitz console

(プロジェクト一覧を取得)
⚡️ > await db.project.findMany({})
prisma:query SELECT "public"."Project"."id", "public"."Project"."createdAt", "public"."Project"."updatedAt", "public"."Project"."code", "public"."Project"."name" FROM "public"."Project" WHERE 1=1 OFFSET $1
[]

取得データが 0 件のため、データベースへの接続等が問題ないことが確認できる。

rabitarochan

つぎに、プロジェクト一覧ページを作成する。

app/pages/projects/index.tsx ファイルを作成し、次のとおり実装する。
生成されるファイルとは若干違うが、どのページも基本的にはこの内容になるのでコピペして使っている。

import Layout from "app/core/layouts/Layout";
import { BlitzPage } from "blitz";
import { Suspense } from "react";

// コンテンツ用のコンポーネント
// React.VFC 型とする。
// <Suspense> 内で利用されることを想定している。
// useQuery, useMutation を利用する。
const ProjectListContent: React.VFC = () => {
  return (
    <ul>
      <li>P001: プロジェクト-001</li>
      <li>P002: プロジェクト-002</li>
      <li>P003: プロジェクト-003</li>
    </ul>
  )
}

// ページを表すコンポーネント
// BlitzPage 型とする。
// useQuery, useMutation を利用しない部分を実装する。
const ProjectListPage: BlitzPage = () => {
  return (
    <div>
      <h1>プロジェクト 一覧</h1>

      <Suspense fallback={<div>Loading...</div>}>
        <ProjectListContent />
      </Suspense>

    </div>
  )
}

// 認証が必要なページの場合、true を指定する。
ProjectListPage.authenticate = true
// レイアウト
ProjectListPage.getLayout = (page) => <Layout title="プロジェクト 一覧">{page}</Layout>

// このページコンポーネントの名前で、ルーティングオブジェクト (Routes) が作られる。
export default ProjectListPage