Zenn
🌟

Prisma で DB テーブルを作成して、Remix でデータを取得する

2024/03/24に公開
Prisma
Remix
tech

目的

Remix を使用したフルスタックアプリケーションを開発します。
この記事では、DB にテーブルを作成して、 DB から取得したデータをブラウザに出力します。

環境

環境 バージョン
Node.js 20.11.1
Yarn 4.1.1
Prisma CLI 5.11.0
Prisma Client 5.11.0

DB にテーブル作成

概要
Prisma CLI を通じて、DB に対しテーブルを作成します。

作業
Prisma CLI と Prisma Client をインストールします。
なお、 Prisma Client はこのセクションで使用しませんが、マイグレーション実行時にインストールされるため、合わせてインストールします。

yarn add -D prisma
yarn add @prisma/client

package.json の scripts に以下の記述を追記します。

{
    scripts: {
        "db:migrate": "prisma migrate dev",
    }
}

schema.prisma ファイルに対して、以下の記述を追記します。

model Post {
  id      String @id @default(cuid())
  title   String
  content String
}

以下のコマンドを実行し、マイグレーションを実行します。

yarn db:migrate

上記コマンドにより、 schema.prisma の変更内容をマイグレーションファイルとして生成し、DB スキーマに反映します。
この時、マイグレーションファイル名を聞かれるため、スキーマ変更の目的に適した名前を入力してください。

ウィザード質問 回答
Enter a name for the new migration: init_database

実行成功すると、 prisma フォルダが以下のような構成になります。

./prisma
├── migrations
│   ├── 20241212343434_init_database
│   │   └── migration.sql
│   └── migration_lock.toml
└── schema.prisma

初期データを用意

概要
初期データがあると、動作確認が容易になります。
DB のマイグレーション実行時に初期データを登録可能にするため、 初期データ登録スクリプトを設定します。

公式リファレンスには ts-node を利用していましたが、私の環境では失敗するため、ts-node と同じことを実現できる tsx を利用します。

作業
初期データ登録用のスクリプトファイルを作成します。

touch prisma/seeds.ts

seeds.ts に以下を記述します。

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

async function main() {
  return await prisma.post.create({
    data: {
      title: 'First Post',
      content: 'This is a first post',
    },
  });
}

main()
  .then(async () => {
    await prisma.$disconnect();
  })
  .catch(async (e) => {
    console.error(e);

    await prisma.$disconnect();
    process.exit(1);
  });

スクリプト実行用 CLI をインストールします。

yarn add -D tsx

package.json に以下の記述を追記します。

{
    "scripts": {
        "db:seed": "prisma db seed",
    },
    "prisma": {
        "seed": "tsx prisma/seeds.ts"
    },
}

初期データ登録コマンドを実行して完了です。

yarn db:seed

$ prisma db seed
Environment variables loaded from .env
Running seed command `tsx prisma/seeds.ts` ...

🌱  The seed command has been executed.
✨  Done in 1.86s.

余談ですが、GUI アプリで確認すると、初期データが追加されたことを確認できます。

Prisma Client でデータを出力

概要
Remix で作成した初期データを取得します。
ここでは、 Prisma を通じて DB からデータを取得し、コンソールに出力します。

作業
app/routes/_index.tsx ファイルを以下のコードと置換します。

import { Post, PrismaClient } from '@prisma/client';
import { json, type MetaFunction } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

export const meta: MetaFunction = () => {
  return [
    { title: 'Remix fullstack blog' },
    { name: 'description', content: 'Remix fullstack blog' },
  ];
};

export const loader = async () => {
  const prisma = new PrismaClient();
  const posts = await prisma.post.findMany();

  return json(posts);
};

export default function Index() {
  const posts: Post[] = useLoaderData();
  console.log({ posts });

  return (
    <div>
      <h1>Welcome to Remix fullstack blog</h1>
    </div>
  );
}

Remix 開発サーバを起動します。

yarn dev

アプリを開き開発者ツールを確認して、データ出力を確認すると完了です。

open http://localhost:5173/

おまけ: DB リセット方法

概要
いつか、開発用 DB に不要データが蓄積され、 DB をリセットの衝動が発生する可能性があります。
その時に備えて、DB をリセットするコマンドを設定しておきます。

作業
package.json に以下の記述を追記します。

{
    "scripts": {
        "db:migrate:reset": "prisma migrate reset --force",
    },
}

以下のコマンドを実行すると、DB をリセットして、マイグレーションを再実行します。
リセット時、合わせて seed コマンドも実行されます。

yarn db:migrate:reset

まとめ

実装コードは以下 PR の通りです。
https://github.com/masayuki-0319/remix_fullstack_blog/pull/3

参考 URL

Discussion